Tooltip Terbang Dengan Kode Css3

Mungkin sobat blogger sudah pernah mendengar tentang tooltip yang bisa terbang ,keren memang akan tetapi berpengaruh ngak dengan masalah looding blog ...? Jawabannya pasti ya...karena penggunaan tooltip dengan penggunaan Jquery pasti akan berpengaruh dengan looding blog.Nah untuk Postingan kali ini INFO BLOG akan membuat bagaimana cara membuat tooltip dengan kode CSS juga bisa terbang Sebagai contoh coba sobat arahkan kursor sobat kearah link di bawah ini

Contoh link yang bisa terbang — Nah tooltip inilah yang akan terbang nantinya-

Setelah melihat contohnya dan sobat ingin juga tahu cara membuatnya silahkan ikuti secar detil tutorialnya di bawah ini

1. Cari kode]]></b:skin> lalu simpan kode css 3 berikut tepat di atas ]]></b:skin>

    a.tooltip {outline:none;text-decoration:none;border-bottom:dotted 1px blue;} a.tooltip strong {line-height:30px;} a.tooltip > span { width:250px; padding: 10px 20px; margin-top: -1000px; margin-left: 10px; opacity:0;  z-index: 10; position: absolute; font-family: Arial; font-size: 12px; font-style: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 2px 2px 2px #999; -moz-box-shadow: 2px 2px 2px #999; box-shadow: 2px 2px 2px #999; -webkit-transition-property:opacity, margin-top, visibility, margin-left; -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -moz-transition-property:opacity, margin-top, visibility, margin-left; -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, visibility, margin-left; -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; transition-property:opacity, margin-top, visibility, margin-left; transition-duration:0.4s, 0.3s, 0.4s, 0.3s; transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; } /*a.tooltip > span:hover,*/ a.tooltip:hover > span { opacity: 1; text-decoration:none; visibility: visible; overflow: visible; margin-top:-10px; display: inline; margin-left: 10px; } a.tooltip span b { width: 15px; height: 15px; margin-left: 20px; margin-top: -19px; display: block; position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: inset -1px 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; display: none\0/; *display: none; } a.tooltip > span { color: #000000; background: #FBF5E6; background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBF5E6', endColorstr='#FFFFFF',GradientType=0 ); border: 1px solid #FF9933; } a.tooltip span b { background: #FBF5E6; border-top: 2px solid #000099; border-right: 2px solid #000099; }

2. Silahkan Save dulu template sobat
3. Untuk memsukkan kode HTML nya silahkan sobat gunakan kode di bawah ini:

   <a href="Link tujuan" class="tooltip"> Judul  <span> — Isi tooltip akan tampil disini </span> </a>