Cara Membuat Tooltip Dengan CSS3
Sunday, January 27, 2013
Edit
Cara Membuat Tooltip Dengan CSS3 - Sobat blogger pasti sudah gak asing lagi kan dengan tooltip. Kali ini saya akan share cara membuat tooltip yang keren menggunakan CSS3. Tooltip ini berbeda dengan tooltip-tooltip yang ada, karena tooltip yang ini memiliki fungsi yang lebih yaitu bisa memberikan informasi dengan kategori sampai 5 kategori, yaitu : Standard tooltip, Critical tooltip, Warning tooltip, Help tooltip, dan Information tooltip.
Jika anda tertarik dengan tooltips ini, berikut Cara Membuat Tooltip Dengan CSS3
- Login ke akun blogger anda >> Template >> Edit HTML >> Proceed
- Cek lists Expand Widget Templates
- Cari kode ]]></b:skin> (Tips: Untuk mempermudah pencarian gunakan Ctr + F)
- Letakkan kode berikut diatas kode ]]></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 );
}
5. Simpan template sobat.
Nah sekarang cara menampilkan tooltips nya , cukup tambahkan kode berikut sesuai dengan spesifikasi tooltips yang sobat inginkan pada bagian HTML editor post.
Untuk tooltip umum dan standar/ General tooltip Gunakan Kode:
<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-general"> TOOLTIP HERE</span></a>
Untuk Critical Tooltip Gunakan Kode:
<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-critical"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0mE0unKOCLEV1sYq-NSnNrB_64Ph-4t__aah1PlZT_8q1c3dJMmMNU8iAdXN5Mr37l2svlxUXrorqyn__u4gtvKIVBHHuOC-FjHqalmDwMQD80mcSyALRqghOfU9jSG9EwazXG9j5oKE/s48/Critical.png" alt="Error" height="48" width="48" /><em>Critical</em>TOOLTIP HERE</span></a>Untuk Warning Tooltip Gunakan Kode:
<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-warning"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicCExPPWDB2sdCB92vpapQFZnCHQb-KF-q60JRYMpjWS5bHWyI951CQdCeavtcCWe5tV3QBXT2Z5ZDxOVkv5mifjxTrpCnR-YK-EaYFTYpIsUav4DHP3nY03FYPheR11CHtbshHK71Jqk/s48/Warning.png" alt="Warning" height="48" width="48" /><em>Warning</em>TOOLTIP HERE</span></a>Untuk Help Tooltip Gunakan Kode:
<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-help"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3EiAabRGyz8fe3gBubW5kcLF0SbbaAcAhUDfKO-vi-U2xl403Ynopl3gK9KGv1nVmp3FAycTc6esXuMBnc0HOtwJIQDP_9_-va-RTjy8tHLMCM5GrG_cernzkuPsGuq0tW10OFLJaOds/s48/Help.png" alt="Help" height="48" width="48" /><em>Help</em>TOOLTIP HERE</span></a>Untuk Information Tooltip Gunakan Kode:
<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-info"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaM2-JRUqbHPntGyKXdBRCWS_L9_GvUJP17vBBH9BzcJ6_S50qiNihpybdnov1sWn-q4WlNd6pTU7BCyChRj2iItvNFf2ucT4mvLq3mtIdRXTJenAS0T1Hx8i-p0ZvEJRqocppQi-ZoPs/s48/Info.png" alt="Information" height="48" width="48" /><em>Information</em>TOOLTIP HERE</span></a>
- Anda dapat mengganti tanda pager # dengan link yang akan ditampilkan padanya tooltips
- Ganti ANCHOR TEXT HEREdengan kalimat yang anda inginkan
- Ganti TOOLTIP HEREdengan kalimat informasi yang ingin anda tambahkan
Source :www.tipstrikblogging.com