Fri, 17 May 2024


How to create a DHTML tool tip functionality?

By: Peter, NetArt Media
Wed, 24 March 2021

<script>
function showToolTip(e,text)
{
document.all.ToolTip.innerHTML="<table><tr><td class=ToolTipTD>"+text+"</td></tr></table>";
ToolTipestyle.pixelLeft=(e.x+15+document.body.scrollLeft);
ToolTip.style.pixelTop=(e.y+document.body.scrollTop);
ToolTip.style.visibility="visible"

}

function hideToolTip()

{
ToolTip.style.visibility="hidden";

}

</script>


<style>
#ToolTip{position:absolute;top:0;left:0;background:#13323f;border-color:#65d0e7;border-style:solid;border-width:1px 1px 1px 1px;visibility:hidden;}
.ToolTipTD {color:white;font-family:verdana;font-size:11}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<body bgcolor=#224452>
<!-- div ToolTip : copy and paste this code in the Body of the page-->
<div id=ToolTip>
</div>
<!-- end div ToolTip -->

<div onmouseover='javascript:showToolTip(event,"NetArt Media")' onmouseout=javascript:hideToolTip()>
<font color=white>show tool tip</font>
</div>

</body>

</head>


Category: Javascript
Share this post:



See All Scripts






Subscribe for our newsletter

Receive the latest blog posts direct in your mailbox