Malam sobat blogger. Lama tidak menulis artikel, kali ini
saya akan membahas tentang cara memasang tooltip kostum otomatis untuk semua
tautan. Code nya saya ambil dari mas Taufik Nurrohman.
Caranya cukup mudah, sobat tinggal simpan kode di bawah ini
tepat dibawah kode
<script type="text/javascript">
//<![CDATA[
// Pure JavaScript Nested Tooltip Replacement for all Anchor Tag
// https://plus.google.com/108949996304093815163/about
(function() {
var a = document.getElementsByTagName('a');
var t = document.createElement('span');
t.id = "tt";
t.style.position = "absolute";
t.style.zIndex = 999;
t.style.backgroundColor = "#FFE13F";
t.style.border = "1px solid #BC5F05";
t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
t.style.boxShadow = "0 1px 3px rgba(0,0,0,0.4)";
t.style.padding = "5px 10px";
t.style.color = "#000";
t.style.maxWidth = "170px";
t.style.wordWrap = "break-word";
t.style.display = "none";
document.body.appendChild(t);
var tooltip = document.getElementById('tt');
function over(e) {
tooltip.style.display = "block";
tooltip.innerHTML = this.title;
tooltip.style.top = (e.pageY + 25) + 'px';
tooltip.style.left = e.pageX + 'px';
this.setAttribute('original', this.title);
this.title = "";
}
function out() {
tooltip.innerHTML = "";
tooltip.style.display = "none";
this.title = this.getAttribute('original');
this.removeAttribute('original');
}
for (var i = 0; i < a.length; i++) {
if (a[i].title) {
a[i].onmouseover = over;
a[i].onmouseout = out;
}
}
})();
//]]>
</script>
Terakhir simpan template. Meski sekilas semoga bermanfaat
ya...sumber: DTE
0 komentar