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

  • 4 Style CSS widget Label Blogger
    Berikut ini beberapa modifikasi label default blogger. Anda hanya mendownload kode CSS yang diberikan berikut dan terapkan pada editing template Anda sebelum ]]></b:skin> atau </style> 1. Label Blog Style One .label-size { float:left; margin:0 0 7px 20px; position:relative; font-family:'Helvetica Neue',Helvetica,A…
  • Membuat animasi loading blog css3
    Halo pembaca, Ada banyak blog yang telah berbagi trik ini tetapi efek yang mereka berikan hanya sebuah gambar bawaan tutorial atau hanya sebuah teks "Loading ...". Hal ini berbeda dari apa yang saya katakan di atas, tetapi efek loading dalam artikel ini hanya dibuat dengan CSS, Dan untuk menambahkan efek menarik ini di blog anda, silahkan ikut…
  • Styles template blog dengan CSS Reset
    Mengatur ulang gaya template blogger Anda, sering disebut sebagai CSS Reset atau Reset CSS adalah proses ulang (atau lebih tepatnya - pengaturan) gaya dari semua elemen ke nilai dasar sehingga menghindari perbedaan lintas-browser karena built-in pengaturan gaya default. Dengan mengatur ulang style blog Anda, Anda menghindari default ke gaya bu…
  • Memahami CSS Unit: Pixels, EM, dan Persentase
    Satuan berperan penting untuk mengukur dan membangun hal-hal seperti rumah, jembatan atau menara, dan membangun sebuah website pun tidak terkecuali. Ada beberapa metode pengukuran yang digunakan di Web, khususnya dalam CSS, yaitu Pixel, EM dan Persentase. Dalam posting ini, kita akan mempelajari melalui unit-unit ini untuk mendapatkan wawasan…
  • Trik CSS Reset Stylesheet template Blogger
    Untuk mengatasi error saat menerapkan trik validasi html5 sobat bisa mencoba dan menggunakan cara ini yaitu menyembunyikan CSS Reset Stylesheet, Kodenya seperti berikut: <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/2761160889-widget_css_bundle.css' /> dan kode kedua <link type="text/css" rel="s…
  • Compress Template Blogger
    Siapa blogger yang tidak ingin blog dan halaman blognya ringan ketika di muat, semua blogger menginginkan blognya memiliki waktu load sesingkat dan seringan mungkin karena itulah banyak cara di lakukan oleh semua pemilik blog untuk mengakalinya termasuk mengompres templatenya. berikut ini adalah salah satu cara mengakali blog yang terbilang be…

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