Tip sederhana untuk menambahkan tooltip pada widget berbagi AddThis. Saya iseng membuatnya beberapa menit yang lalu :p
Jika Anda adalah pengguna widget AddThis seperti Saya, pasti Anda memiliki markup yang mirip seperti ini:
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
<a class='addthis_button_preferred_1'></a>
<a class='addthis_button_preferred_2'></a>
<a class='addthis_button_preferred_3'></a>
<a class='addthis_button_preferred_4'></a>
<a class='addthis_button_compact'></a>
<a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END -->Tepat di dalam elemen .addthis_toolbox tambahkan elemen <span class="addthis-tooltip">Teks Anda</span> seperti ini:
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
<span class="addthis-tooltip">Bagikan kepada teman!</span>
<a class='addthis_button_preferred_1'></a>
<a class='addthis_button_preferred_2'></a>
<a class='addthis_button_preferred_3'></a>
<a class='addthis_button_preferred_4'></a>
<a class='addthis_button_compact'></a>
<a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END -->Sekarang masuklah ke halaman editor HTML blogmu kemudian tambahkan kode CSS ini tepat di atas kode ]]></b:skin> atau </style>:
/* Modifikasi widget AddThis */
.addthis_toolbox {
width:150px;
position:relative;
background-color:darkgreen;
padding:10px 15px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.addthis_toolbox .addthis-tooltip {
display:block;
width:140px;
padding:10px 15px;
position:absolute;
bottom:100%;
left:30px;
z-index:77;
margin-bottom:40px;
background-color:black;
font:bold 12px 'Trebuchet MS',Arial,Sans-Serif;
color:white;
text-align:center;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
opacity:0;
visibility:hidden;
-webkit-transition:all 0.26s ease-out;
-moz-transition:all 0.26s ease-out;
-ms-transition:all 0.26s ease-out;
-o-transition:all 0.26s ease-out;
transition:all 0.26s ease-out;
}
.addthis_toolbox .addthis-tooltip:before {
content:"";
width:0px;
height:0px;
border:7px solid transparent;
border-top-color:black;
position:absolute;
top:100%;
left:15px;
}
.addthis_toolbox:hover .addthis-tooltip {
visibility:visible;
opacity:1;
margin-bottom:20px;
}
/* Akhir modifikasi widget AddThis */Klik Simpan template.
