Membuat Tooltip Dengan 5 Varian Kategori

Membuat Tooltip Dengan 5 Varian Kategori - Tooltip merupakan komponen grafis dalam user interface (antarmuka pengguna). Komponen ini biasanya muncul ketika pointer mouse diarahkan ke komponen tersebut. Tooltip dapat berisi bantuan, keterangan, kritik, maupun informasi lain yang terkait dengan komponen tersebut. Dengan adanya tooltip ini maka dapat memudahkan pengguna dalam mengetahui fungsi komponen tanpa harus mencobanya terlebih dahulu dan tidak memenuhi tampilan utama aplikasi.

Dan berikut ini adalah tutorial tentang cara membuat tooltip dengan 5 varian kategori, yaitu : Standard tooltip, Critical tooltip, Warning tooltip, Help tooltip, dan Information tooltip. Silahkan langsung saja di ikuti langkah-langkahnya dengan baik dan benar!

1. Login ke akun blogger anda, klik menu Template >> Edit HTML
2. Cari kode ]]></b:skin> (Gunakan Ctr + F untuk mempermudah pencarian)
3. Letakkan kode berikut diatas kode ]]></b:skin> tadi.

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

5. Kemudian simpan template anda.

Nahh, sekarang tinggal bagaimana cara menampilkan tooltipsnya, caranya cukup mudah yaitu cukup dengan menambahkan kode berikut sesuai dengan spesifikasi tooltips yang anda inginkan pada bagian HTML editor post.

Untuk menampilkan General Tooltip/Tooltip Standar (Umum) :

<a class="tbi-tooltip" href="http://www.blogger.com/blogger.g?blogID=4544498916210749826#">
TULISKAN TEXT ANDA DISINI
<span class="custom tbi-general">
TULISKAN TOOLTIP ANDA DISINI
</span></a>

Untuk menampilkan Critical Tooltip :

<a class="tbi-tooltip" href="#">
TULISKAN TEXT ANDA DISINI
<span class="custom tbi-critical">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8czpVoXE9idHH6uiw735JUIovVRRvDKtpEuH_5Zv8Q62kiQ-ogMRvVPE9-o7dxJXk0sSOoO_8z7IPLJ6_4cYfesIZZzJd5iW7LcxuGTmeOnyRZ8qjp-KmY4Cs5B5SSMnE-ZJcJEJ7SSY/s48/Critical.png" alt="Error" height="48" width="48" /><em>Critical</em>
TULISKAN TOOLTIP ANDA DISINI
</span></a>

Untuk menampilkan Warning Tooltip :

<a class="tbi-tooltip" href="#">
TULISKAN TEXT ANDA DISINI
<span class="custom tbi-warning">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqmBTj60P5pL3vX9Iml2VVFSrQ1x_S0qpeFnvPrSAVQ_ttXTaXOn1GEHF_eE5Lk9RfrTZSKerVog4B1JQEsfqFYMhRe02yWe1WmjA-4K0lltG9BGmW5RX1VC-ttl8purlvU7z6-TRJM7Y/s48/Warning.png" alt="Warning" height="48" width="48" /><em>Warning</em>
TULISKAN TOOLTIP ANDA DISINI
</span></a>

Untuk menampilkan Help Tooltip :

<a class="tbi-tooltip" href="#">
TULISKAN TEXT ANDA DISINI
<span class="custom tbi-help">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcHszbqrPdGViEi9s-SWpslMDOwCCX_qRVzO5WlA-aavygcTK6rlE2ZfwxXE4JiSPIFGqzhfpD32-DqCTgfsBpu-MmGADTPhbYaMbnoHeE8DV0tcM_9t2UAvkhcUS50xeG8Pbu5Cerz2Q/s48/Help.png" alt="Help" height="48" width="48" /><em>Help</em>
TULISKAN TOOLTIP ANDA DISINI
</span></a>

Untuk menampilkan Information Tooltip :

<a class="tbi-tooltip" href="#">
TULISKAN TEXT ANDA DISINI
<span class="custom tbi-info">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieEhfhfvSTWqi7FrViNV3fd6Idla-CDYq2zGoFQDZNoDczhgLMQOwB7AzPHDUOpD-avnAfPkbSB9xxX79oY9HjiXsCGtVF2EJQyRwUunpIXaUBed2ouDi2aBmbqZlide6TK_DFV8bjZTU/s48/Info.png" alt="Information" height="48" width="48" /><em>Information</em>
TULISKAN TOOLTIP ANDA DISINI
</span></a>

Note :
1. Silahkan ganti tanda # dengan link yang akan di tuju jika text anchornya di klik.
2. Ganti tulisan TULISKAN TEXT ANDA DISINI dengan text yang anda inginkan.
3. Ganti tulisan TULISKAN TOOLTIP ANDA DISINI dengan text yang ingin anda tambahkan.

Akhir kata, cukup sekian tutorial tentang cara membuat tooltip dengan 5 varian kategori ini. Semoga bermanfaat bagi anda, mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...