Home
CSS

Membuat Tooltip Menggunakan CSS

Cara membuat atau menambahkan tooltip saat menorot link dan gambar menggunakan CSS.
Lalu Abd. Rahman
Menambahkan tooltip ke dalam struktur template akan menambah daya tarik pembaca mengeksplorasi halaman web kita. Apa itu tooltip ? Tooltip adalah deskripsi pembantu saat seseorang menyorot link (hover) atau gambar yang sudah disertai tooltip didalamnya, sehingga deskripsi link atau gambar akan muncul.

Cara membuat tooltip menggunakan CSS

Login ke dashboard blogger Anda (pastilah hehe)
Klik Edit HTML
Temukan tag ]]></b:skin>
Lalu letakkan CSS berikut diatas tag ]]></b:skin>


.jlb-tooltip {
 outline: none;
 cursor: help;
 position: relative;
 text-decoration: none;
 border-bottom: 1px dotted #000;
}

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

.jlb-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;
}

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

.jlb-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;
}

.jlb-general {/*icon*/
 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;
}

.jlb-critical {/*icon*/
 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 );
}

.jlb-help {/*icon*/
 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 );
}

.jlb-info {/*icon*/
 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 );
}

.jlb-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 tooltip yang anda inginkan pada bagian HTML editor post.

Untuk tooltip umum dan Standard/ General gunakan kode:

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

Untuk tooltip Critical gunakan kode:

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

Untuk tootip Warning gunakan kode:

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

Untuk tooltip Help gunakan Kode:

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

Untuk tooltip Information gunakan kode:

<a class="jlb-tooltip" href="#">LINK ANDA<span class="custom jlb-info"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDL7E4-iiQicJM4hDWJ26z2_0_xSWLc7amsJcsneL-h61PVMX4SdyJ-e5BK2EQvcid9djgCKcdIlC0L67alIuDJZzCS2OH37BASLWQLx4J4WaUzvEOCkqPZJ83n58PJL-hISt8uvyKhM/s48/Info.png" alt="Information" height="48" width="48" /><em>Information</em>TULIS CUPLIKAN DISINI</span></a>

  • Ganti tanda pagar # dengan link yang akan ditampilkan padanya tooltip
  • Ganti LINK ANDA dengan kalimat yang Anda inginkan (judul link)
  • Ganti TULIS CUPLIKAN DISINI dengan deskripsi yang hendak Anda tampilkan.

Selamat belajar..

Tentang Penulis

Lalu Abd. Rahman
Lahir selamat. Saya seorang pembelajar, pemeriksa fakta, penulis, editor, dan pengeblog.

Post a Comment