Cara Membuat Tooltip Sendiri

Judul postingan hari ini adalah cara membuat tooltip sendiri,cara membuat tooltip keren,cara membuat tooltip di blog,cara membuat tooltip dengan css.

Tooltip adalah sebuah keterangan yang bisa disisipkan dalam link atau gambar yang bertujuan untuk memperjelas object tersebut.


Cara kerja tooltip yaitu pada saat sebuah link atau gambar disorot oleh pointer maka akan muncul sebuah box yang berisi keterangan untuk link atau gambar tersebut.


Tooltip default biasanya ditulis dengan cara :

• <a href="http://gragasanit.blogspot.com/" title="keterangan tooltip ditulis disini">Nama Link</a> (Untuk Link) 
• Maka hasilnya seperti ini  Nama Link

• <img src="Link Gambar" title="keterangan gambar"/> (Untuk Gambar) 

• Maka hasilnya seperti ini

Tapi kali ini saya akan sharing tooltip yang lebih bagus menurut saya dan cara penulisannya agak sedikit berbeda.

• Petama login ke blogger dan menuju "Edit HTML"
• Kemudian cari kode ]]></b:skin> dan copas kode dibawah tepat diatas kode ]]></b:skin>

copy paste kode ini:

/* TOOLTIP*/

div > .tooltip, li > .tooltip, a > .tooltip, span > .tooltip { opacity: 0;
margin-top: 30px;
visibility: hidden;
margin-left: -230px;
-webkit-transition-property:opacity, margin-top, visibility, margin-left;
-webkit-transition-duration:0.5s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-property:opacity, margin-top, visibility, margin-left;
-moz-transition-duration:0.5s;
-moz-transition-timing-function: ease-in-out;
-o-transition-property:opacity, margin-top, visibility, margin-left;
-o-transition-duration:0.5s;
-o-transition-timing-function: ease-in-out;
transition-property:opacity, margin-top, visibility, margin-left;
transition-duration:0.5s;
transition-timing-function: ease-in-out;
}
div:hover > .tooltip, li:hover > .tooltip, a:hover > .tooltip, span:hover > .tooltip,
a .tooltip:hover, span .tooltip:hover, li .tooltip:hover, div .tooltip:hover {
opacity: 1;
visibility: visible;
overflow: visible;
margin-top: -50px;
display: inline;
margin-left: -230px;
-webkit-transition-property:opacity, margin-top, visibility, margin-left;
-webkit-transition-duration:0.5s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-property:opacity, margin-top, visibility, margin-left;
-moz-transition-duration:0.5s;
-moz-transition-timing-function: ease-in-out;
-o-transition-property:opacity, margin-top, margin-left;
-o-transition-duration:0.5s;
-o-transition-timing-function: ease-in-out;
transition-property:opacity, margin-top, visibility, margin-left;
transition-duration:0.5s;
transition-timing-function: ease-in-out;
}
.tooltip {
background: #000;
border: #ffff01 solid 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
text-align: center;
width: 150px;
padding: 5px;
margin: 5px;
position: absolute;
font: normal 12px Arial;
text-decoration: none;
color: #ffff01;
z-index: 10;
}
.tooltip span { /* Triangle */
background: #000;
border: #ffff01 solid 2px;

width: 10px;
height: 10px;
margin-left: 47px;
margin-top: -12px;
display: block;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
display /***/: none9;
*display: none !important;
*display: none;
}

/* END TOOLTIP*/

Kode Pemanggilnya seperti ini :

• Untuk link tulisan

<a href="Link disini"> <!-- link untuk tulisan-->
<span class="tooltip">
keterangan yang akan muncul di tooltip <!--Keterangan yang ada dibox tooltip-->
</span>
Tooltip <!-- tulisan yang akan muncul dipostingan-->
</a>

• Untuk gambar

<a href="Link disini"> <!-- link untuk gambar -->
<img src="http://cur.cursors-4u.net/others/oth-7/oth708.cur" /> <!-- link untuk menampilkan gambar dipostingan-->
<span class="tooltip">
<img src="http://cur.cursors-4u.net/others/oth-7/oth708.cur" /> <!-- link untuk menampilkan gambar dibox tooltip-->
keterangan yang akan muncul di tooltip <!--Keterangan yang ada dibox tooltip-->
</span>
</a>