Headlines News :
Home » , , » TOOLTIP

TOOLTIP

Written By abdur rozak on Rabu, 09 Mei 2012 | 10.41

Tooltip ialah decskripsi gambar atau tulisan,ianya biasa di isi dengan kandungan atau tips tertentu dalam halaman situs.Sila lihat contoh dibawah ini.

Sila dekatkan mouse di:

BLOG MASTERTips dan berbagai gadget blogspot



Free email hosting setiap pembelian domain


1.Cara membuat
Sila letak kod ini diatas kod ]]></b:skin>


.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
}
.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover span
{
visibility: visible;
}
.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

2.SIMPAN/SAVE


3.Buat mana mana tulisan atau gambar
Tooltip ini boleh letak dimana saja asalkan memakai kod di bawah ini.
Kod tulisan:

<a href="http://www.hostingrajawali.com/" class="tooltip">BLOG MASTER<span>Tips dan gadget blog</span></a>

Kod gambar:

<a href="http://www.hostingrajawali.com" class="tooltip"> <img  src='http://www.hostingrajawali.com/image/domain.jpg' width='205' height='95'/> <span>Free email hosting setiap pembelian domain</span></a>

Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. BLOG MASTER - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger