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

  • Pengertian Selector, Property dan Value
    Setelah mengetahui cara menginput kode CSS ke halaman HTML, saatnya untuk memahami kode CSS itu sendiri. Kali ini kita akan membahas inti dari CSS, yakni Pengertian Selector, Property dan Value pada CSS. Pengertian Selector CSS Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘men…
  • Efek shadow dengan css :before :after pseudo-elemen
    Dalam tutorial ini kita akan menciptakan kotak dengan efek bayangan hanya dengan CSS. Kita akan menggunakan CSS shadow properti yang merupakan salah satu properti CSS favorit saya yang akan Anda lihat dalam tutorial ini dan betapa mudahnya Anda dapat menggunakannya untuk kreasi anda sendiri. Properti box-shadow memungkinkan Anda untuk dengan…
  • Membuat link berefek Nudge
    Dengan semakin berkembangnya jQuery dan CSS3 para blogger terus menciptakan hal baru yang terbilang menarik, salah satunya adalan link nudge ini. Link nudge adalah link yang berefek ketika mouse menyorotinya maka link tersebut akan bergeser. trik ini banyak di gunakan para blogger tidak terkecuali juga oleh master taufik nurohman, di bawah ini…
  • :before dan :after Elemen Pseudo pada Sidebar
    Ini adalah metode lain menggunakan properti :before dan :after dan akan bekerja tanpa masalah di browser apapun, termasuk IE8. trik ini akan membagi bar header sidenar ke kiri dan kanan bagian, di mana kiri akan berisi judul dan kanan link terkait. Ide menghasilkan Adobe ini sebenarnya dibahas oleh css-trik yang disesuaikan dengan Blogger. …
  • CSS untuk Contact form di blogger/blogspot
    Sebelumnya saya telam memposting "Cara memasang widget contact form di blogger" dan "Memasang widget contact form di halaman statis blogger". kali ini saya akan membagi tiga css yang berbeda untuk formulir kontak widget blogger anda dan bagaimana cara menggunakannya, langsung saja... 01CSS form contact #1 /*---- Custom Blogger Contact…
  • Pengertian CSS
    CSS atau Cascading Style Sheets merupakan bahasanya desainer web. Namun sebenarnya apa yang dimaksud dengan CSS? Kita akan membahas pengertian CCS dalam artikel ini. Pengertian CSS Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah …

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


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...