Tooltip Terbang Dengan Kode Css3

Author : Unknownuntuk mengenal lebih jauh tentang mas mahfid silahkan klik link Info Blog

orang yang selalu ingin tahu ,mencoba sesuatu yang di anggap orang lain sulit dan berusaha untuk menjadi bisa Sobat sedang membaca artikel tentang Tooltip Terbang Dengan Kode Css3. Silahkan tinggalkan jejak di kolom Komentar untuk mempermudah Unknown berkunjung kembali ke blog sobat.

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>