Tips.cl

Les han pedido mostrar un tooltips cuando se posicionan en un campo en un formulario web?. Pues he encontrado en una pagina lo siguiente:

function showDiv (el, div, text, alignX, alignY) {
if (document.getElementById) {
var i = document.getElementById(el);
var c = document.getElementById(div);
if (c.style.display != “block”){
var l=0;
var t=0;
aTag = i;
do {
aTag = aTag.offsetParent;
l += aTag.offsetLeft;
t += aTag.offsetTop;
}
while (
aTag.offsetParent && aTag.tagName != ‘BODY’
);
var left = i.offsetLeft + l;
var top = i.offsetTop + t + i.offsetHeight + 2;
if (alignX == ‘left’ && c.style.width){
left = left - parseInt(c.style.width);
}
if (alignY == ‘top’ && c.style.height){
top = top - parseInt(c.style.height) -25;
}
c.style.left = left+’px’;
c.style.top = top+’px’;
c.style.display = “block”;
c.innerHTML = ‘<table cellpadding=”0″ border=”0″><tr><td align=”center”>’ + text + ‘</td></tr></table>’;
} else { c.style.display=”none”; }
}
}

function hideDiv (div) {
if (document.getElementById){
var c=document.getElementById(div);
c.style.display=&quot;none&quot;;
}
}

Estas funciones nos sirven para hacer el show el hide. Es un div, el cual debe ser incluido en pagina. Asi:

<div class=”popup” id=”Popup” > <table cellpadding=”3″ border=”0″> <tr> <td align=”center”>?sto es un tooltip</td> </tr> </table> </div>

Para formateo en el CSS:

div.popup {
position: absolute;
display: none;
padding: 1px;
border: 1px solid #feba02;
background-color: #fff9e7;
z-index: 99;
width:200px;
}

Como usarlo:

onmouseover=”showDiv(’<ELEMENTO>’,'Popup’,'Mensaje’,'right’,'bottom’)” onmouseout=”hideDiv(’Popup’);”

right es para definir hacia dónde se alargará el Tooltip. Los valores posibles son ‘left’, ‘center’ y ‘right’. En nuestro caso se va a alargar hacia la derecha, anclando su lado izquierdo en la imágen.

bottom es parecido al punto anterior pero verticalmente. Los valores posibles son ‘top’, ‘middle’ y ‘bottom’. En nuestro caso se mostrar? el tooltip por debajo del elemento de anclaje.

Ojala les sirva

Compartelo