Tip sederhana untuk menambahkan tooltip pada widget membuatkan AddThis. Saya iseng membuatnya beberapa menit yang kemudian :p
Jika Anda yakni pengguna widget AddThis menyerupai Saya, niscaya Anda mempunyai markup yang menyerupai mirip 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> menyerupai 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 instruksi CSS ini sempurna di atas instruksi ]]></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 tema.
Sumber https://www.dte.web.id/