Translucent Animated Tooltip
Dieses JavaScript erzeugt durchsichtige ToolTips
Autor: Ashish Patil
Demo:
Animated Tooltip
Move your mouse over following lines:Line One
Line Two
with background !
JavaScript - Translucent Animated Tooltip
Translucent Animated Tooltip JavaSript File
in <head> einfügen
<script type="text/javascript" src="animated-tooltip.js"></script>
Tooltip
<span class="ttip" onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event)>
Line One
</span><br>
<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; text-align: center;">
Translucent tooltip </div>
JavaScript after <body>
<script>
var t1=null;
var l1="Tooltip for line one";
var l2="Tooltip for line two";
function init()
{
t1 = new ToolTip("a",true,40);
}
</script>
CSS (Beispiel)
.ttip { BORDER-BOTTOM: #00cccc 1px dotted; color: red; FONT-SIZE: 18px;}
