Pues tengo mi tooltip: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body><style type="text/css">
#toolTipBox {
display: none;
padding: 5;
font-size: 12px;
border: black solid 1px;
font-family: verdana;
position: absolute;
color: 000000;
}
</style><script type="text/javascript">
var theObj="";
function toolTip(text,me) {
theObj=me;
theObj.onmousemove=updatePos;
document.getElementById('toolTipBox').innerHTML=text;
document.getElementById('toolTipBox').style.display="block";
window.onscroll=updatePos;
}
function updatePos() {
var ev=arguments[0]?arguments[0]:event;
var x=ev.clientX;
var y=ev.clientY;
diffX=24;
diffY=0;
document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px";
document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
theObj.onmouseout=hideMe;
}
function hideMe() {
document.getElementById('toolTipBox').style.display="none";
}
</script>
<div align="center">
<span id="toolTipBox" width="900"></span>
<img src="images/image_archive.png" width="110" height="27" border="0" onmouseover="toolTip('Mensaje que aparecera en el tooltip',this)"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<body><style type="text/css">
#toolTipBox {
display: none;
padding: 5;
font-size: 12px;
border: black solid 1px;
font-family: verdana;
position: absolute;
color: 000000;
}
</style><script type="text/javascript">
var theObj="";
function toolTip(text,me) {
theObj=me;
theObj.onmousemove=updatePos;
document.getElementById('toolTipBox').innerHTML=text;
document.getElementById('toolTipBox').style.display="block";
window.onscroll=updatePos;
}
function updatePos() {
var ev=arguments[0]?arguments[0]:event;
var x=ev.clientX;
var y=ev.clientY;
diffX=24;
diffY=0;
document.getElementById('toolTipBox').style.top = y-2+diffY+document.body.scrollTop+ "px";
document.getElementById('toolTipBox').style.left = x-2+diffX+document.body.scrollLeft+"px";
theObj.onmouseout=hideMe;
}
function hideMe() {
document.getElementById('toolTipBox').style.display="none";
}
</script>
<div align="center">
<span id="toolTipBox" width="900"></span>
<img src="images/image_archive.png" width="110" height="27" border="0" onmouseover="toolTip('Mensaje que aparecera en el tooltip',this)"></div>
</body>
</html>
Pero quiero que el tooltip que salga SEA UNA IMAGEN, pero Nose como, intente agregar un
background-image
Pero no, Sale la imagen dentro de un cuadradito y se ve mal, y ademas que se repite
quien me AYUDA? ejemplo
