Membuat tooltip menggunankan css3

Membuat tooltip menggunankan css3

CSS

Pagi ini saya mencoba share trik membuat tooltip css3.apa itu tooltip ? tooltip adalah deskripsi pembantu saat seseorang menklik link atau gambar yang sudah disertai tooltip didalamnya,sehingga deskripsi link atau gambar akan muncul.nah,bagaimana membuat yang lebih keren ? simak tutorial berikut.
  • Login ke akun blogger
  • Klik Edit HTML - "expand template widgets"
  • cari kode ]]></b:skin> dengan menggunakan Ctrl + F
  • lalu letakkan kode berikut diatas ]]></b:skin>:
.tbi-tooltip {
 outline: none;
 cursor: help;
 position: relative;
 text-decoration: none;
 border-bottom: 1px dotted #000;
}

.tbi-tooltip span {
 margin-left: -999em;
 position: absolute;
 color: #000;
}

.tbi-tooltip:hover span {
 font-family: Trebuchet MS, Calibri, Tahoma, Geneva, sans-serif;
 position: absolute;
 left: 1em;
 top: 2em;
 z-index: 99;
 margin-left: 0;
 width: 250px;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 0px 0px 9px #000000;
 -webkit-box-shadow: 0px 0px 9px #000000;
 box-shadow: 0px 0px 9px #000000;
}

.tbi-tooltip:hover img {
 border: 0;
 margin: -10px 0 0 -55px;
 float: left;
 position: absolute;
}

.tbi-tooltip:hover em {
 font-family: Candara, Tahoma, Geneva, sans-serif;
 font-size: 1.2em;
 font-weight: bold;
 display: block;
 padding: 0.2em 0 0.6em 0;
}

.custom {
 padding: 0.5em 0.8em 0.8em 2em;
}

.tbi-general {
 background: #EDEDED;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjVmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iI2UzZWFlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOGQ3ZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1)));
 background: -webkit-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: -o-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: -ms-linear-gradient(top,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 background: linear-gradient(to bottom,  rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
 -webkit-box-shadow: 4px 4px 1px 1px #ccc;
 box-shadow: 4px 4px 1px 1px #ccc;
}

.tbi-critical {
 border: 1px solid #FF3334;
 background: #ffccaa;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2NhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjg0ODIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffccaa 0%, #ff8482 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffccaa), color-stop(100%,#ff8482));
 background: -webkit-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: -o-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: -ms-linear-gradient(top,  #ffccaa 0%,#ff8482 100%);
 background: linear-gradient(to bottom,  #ffccaa 0%,#ff8482 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffccaa', endColorstr='#ff8482',GradientType=0 );
}

.tbi-help {
 border: 1px solid #2BB0D7;
 background: #a9e4f7;
 background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7));
 background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -o-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -ms-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 );
}

.tbi-info {
 border: 1px solid #2BB0D7;
 background: #a9e4f7;
 background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a9e4f7 0%, #0fb4e7 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7));
 background: -webkit-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -o-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: -ms-linear-gradient(top,  #a9e4f7 0%,#0fb4e7 100%);
 background: linear-gradient(to bottom,  #a9e4f7 0%,#0fb4e7 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 );
}

.tbi-warning {
 border: 1px solid #FFAD33;
 background: #f1e767;
 background: url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZTc2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmY2JjNWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f1e767 0%, #fcbc5d 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#fcbc5d));
 background: -webkit-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: -o-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: -ms-linear-gradient(top,  #f1e767 0%,#fcbc5d 100%);
 background: linear-gradient(to bottom,  #f1e767 0%,#fcbc5d 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#fcbc5d',GradientType=0 );
}


Tambahkan kode berikut sesuai dengan spesifikasi tooltips yang anda inginkan pada bagian HTML editor post.

Untuk tooltip umum dan standar/ General tooltip Gunakan Kode

<a class="tbi-tooltip" href="#">LINK ANDA<span class="custom tbi-general"> TULIS CUPLIKAN DISINI</span></a>

Untuk Critical Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">LINK ANDA<span class="custom tbi-critical"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4KreY-Z6KB_0U-Gf9E8OadODLTBB60_yX_PIG-rEoukhR81byqNVYyCx13gED5PiXNOInjOMpoQNPySYbWJfIodax2ncgZZuQVDdxzG0jINsxR1K6_HY989QSSTVJj2l__xABPXZAFU/s48/Critical.png" alt="Error" height="48" width="48" /><em>Critical</em>TULIS CUPLIKAN DISINI</span></a>

Untuk Warning Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">LINK ANDA<span class="custom tbi-warning"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu54RH1Ytmo-07j5e506C36Xd04Eb545bW9fupoHXa4EAvDtbhW-l6PbAlDw2l5CjQubsFLbiykL64OXz4lbmpTPXyYttRhSp_B8o2RBQaVPHC7skgsQj64nu70IQMCv1JBqoaFWwECDw/s48/Warning.png" alt="Warning" height="48" width="48" /><em>Warning</em>TULIS CUPLIKAN DISINI</span></a>

Untuk Help Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">LINK ANDA<span class="custom tbi-help"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQwHYzS3NNTJA199N_a0qKU_YGZH8OeU1HiXzTtn5ukzr8394bcDxH-1IOAFNOBqdgOb2I5LKjbXTTtzz5sfUZaPD4fZf6cekVENaJ5ccRYNkgxikaRfnZvpvYhS357NDYEi5tq1rLltM/s48/Help.png" alt="Help" height="48" width="48" /><em>Help</em>TULIS CUPLIKAN DISINI</span></a>

Untuk Information Tooltip Gunakan Kode:

<a class="tbi-tooltip" href="#">LINK ANDA<span class="custom tbi-info"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdZeD6HynsCeeUYyr1zNOKdlnMkp2brQpkPgiY82-acdM2rbxLB5E96GdKwzmGkWm6u4kH6TTIotDp0Q2ERWpA-jm086woT1959lIi3Hlp83dqJN1Dq4fF83PICtZpHZ9fTV9GWgtZTuc/s48/Info.png" alt="Information" height="48" width="48" /><em>Information</em>TULIS CUPLIKAN DISINI</span></a>

  • Anda dapat mengganti tanda pager # dengan link yang akan ditampilkan padanya tooltips
  • Ganti LINK ANDA dengan kalimat yang anda inginkan
  • Ganti TULIS CUPLIKAN DISINI dengan kalimat informasi yang ingin anda tambahkan
jIika sobat ingin menambahkan ke link menu horizontal milik sobat, sisipkan saja seperti berikut ini.

Cari kode:  class="tbi-tooltip"

lalu sisipkan di antara kode pembuka link <a...disini...href='#'>contoh</a> seperti berikit:

<a class="tbi-tooltip" href="#">contoh</a>

kemudian sisipkan kode:

<span class="custom tbi-info"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdZeD6HynsCeeUYyr1zNOKdlnMkp2brQpkPgiY82-acdM2rbxLB5E96GdKwzmGkWm6u4kH6TTIotDp0Q2ERWpA-jm086woT1959lIi3Hlp83dqJN1Dq4fF83PICtZpHZ9fTV9GWgtZTuc/s48/Info.png" alt="Information" height="48" width="48" /><em>Information</em>TULIS CUPLIKAN DISINI</span>

di antara kode penutup link  <a class="tbi-tooltip" href="#">contoh...disini...</a> seperti berikut:

<a class="tbi-tooltip" href="#">contoh<span class="custom tbi-info"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdZeD6HynsCeeUYyr1zNOKdlnMkp2brQpkPgiY82-acdM2rbxLB5E96GdKwzmGkWm6u4kH6TTIotDp0Q2ERWpA-jm086woT1959lIi3Hlp83dqJN1Dq4fF83PICtZpHZ9fTV9GWgtZTuc/s48/Info.png" alt="Information" height="48" width="48" /><em>Information</em>TULIS CUPLIKAN DISINI</span></a>

pilih tooltip mana yang sesuai dengan link anda, standart, critical, warning, help atau information. Semoga berguna untuk sobat...

Artikel Terkait

  • CSS widget popular post Blogger
    Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik. Silakan masuk pada akun blogger Anda Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja. langkah di atas d…
  • Blockquote yang membuka otomatis di posting
    Dengan memanfaatkan css transisi dan css pseudo classes kita coba untuk membuat blockuote yang akan terbuka dengan sendirinya ketika pointer di arahkan ke area elemen blockquote tersebut. trik ini sendiri sebenarna lebih cenderung seperti efek hover, dan tidak menggunakan javasript atau pun jQuery di dalam cara kerjanya. jika anda ingin tau cob…
  • CSS untuk widget Popular Post blogger/blogspot
    Dalam posting ini saya sajikan tujuh gaya untuk posting populer widget di blogger. Pertama, Anda perlu menambahkan widget populer posting di blog. Untuk itu, Pergi ke Tata Letak> Tambah Gedget, lalu pilih populer Post widget. Kemudian hapus centang thumbnail/gambar dan tampilkan cuplikan. Jika Anda sudah memiliki posting widget populer hany…
  • Trik mendesain friendly template
    Blogger telah menyediakan tool yang baik untuk menyesuaikan template yang disebut Template Designer Blogger. Menggunakan Blogger Template Designer Anda dapat mengubah gaya font, warna, lebar template, dan latar belakang template. Blogger Template Designer menyediakan cara mudah mengubah template dengan Anda masuk ke dalam Blogger Template Desi…
  • Bullet otomatis dan manual dengan css di post
    Bullet default dari blogger memang tidak terlihat begitu jelek di posting namun para blogger memodifikasinya agar lebih terlihat unik dan berbeda dari yang lainnya dengan menambahkan icon yang bervatif. Selain menambah kesan postingan unik bullet hasil modifikasi ini juga menambah tampilan posting lebih cantik dan tidak terlihat biasa saja se…
  • Memahami CSS dan Penerapan CSS pada HTML
    Css sendiri berfungsi untuk mendesain tampilan/layout agar terlihat lebih indah dan berkualitas.selain itu css juga dapat meringkas kode-kode yang di gunakan pada template anda dan tentunya anda pun akan sedikit menggunakan kode kode pada blog. CSS adalah singkatan dari Cascading Style Sheets CSS digunakan untuk mendesain tampilan dari html,…

6 komentar

  1. Tangan Blogger13 April 2013 pukul 15.08

    oke gan, ane lngsung ke tkp... :D

    BalasHapus
  2. Admin11 April 2014 pukul 08.07

    cukup bagus ya tooltip ini :)

    BalasHapus
  3. Unknown9 November 2014 pukul 16.20

    klo cara buat psang css nya udah bang tpi buat tooltipny sya blom ngerti

    BalasHapus
    Balasan
    1. Dafin defandaky10 November 2014 pukul 16.09

      coba kode 

      <a class="tbi-tooltip" href="#">LINK ANDA<span class="custom tbi-info"><img src="https://lh3.googleusercontent.com/-aPsqP_cKj0k/UB1pbaBgV_I/AAAAAAAAFiY/xqeP4CLV3ew/s48/Info.png" alt="Information" height="48" width="48" /><em>Information</em>TULIS CUPLIKAN DISINI</span></a>
      di pasang di editos html saat posting klo udah pasang cssnya

      Hapus

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...