HTML Translucent Tooltip

HTML Translucent Tooltip

Move your mouse over following lines:

Line One

Line Two

Here is the complete HTML for the file. Make sure you specify proper path for the Tooltip.js file. You can combine translucency along with background image for that classy look!

lang: xml
<title>HTML Translucent Tooltip</title>
<LINK rel="stylesheet" type="text/css" href="styles/StyleSheet.css">
<script language="javascript" src="js/Tooltip.js"></script>
<body onload=init()>
Move your mouse over following lines:<br><br>
<span class="ttip" onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event)>
Line One
<span class="ttip" onmouseover=if(t1)t1.Show(event,l2) onmouseout=if(t1)t1.Hide(event)>
Line Two

<div id="a" style="background-color:white;width: 184px; height: 49px;filter: alpha(Opacity=75);
opacity:0.75;border: solid 1px gray; background-image: url(images/bg.jpg); text-align: center;">
Translucent tooltip <br> with background !

var t1=null;
var l1="Tooltip for line one";
var l2="Tooltip for line two";
function init()
t1 = new ToolTip("a",true,40);

Translucent tooltip
with background !

var t1=null; var l1=”Tooltip for line one”; var l2=”Tooltip for line two”; function init(){t1 = new ToolTip(“a”,true,40); return false; } window.onload = init;

Copyright (c) 2007-2019 Ashish Patil . Please read FAQ for more details.