Necesitamos un CSS con alguna imagen (que no pienso que sean imprescindibles, la verdad: podéis añadir, en su lugar, bordes redondeados o simplemente, nada. Cada quien a su gusto):
#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}
#tt {position:absolute; display:block; background:url(http://.../tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(http://.../tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(http://.../tt_bottom.gif) top right no-repeat; overflow:hidden}
.- SCRIPT:
<script language='javascript' src='http://.../tooltip_script.js' type='text/javascript'/>
.- HTML:
Hay que usar la siguiente tag para contener la Tooltip, p.e.:
TEXTO<span class="hotspot" onmouseover="tooltip.show('TEXTO-TOOLTIP <strong>2ºTEXTO-TOOLTIP</strong>');" onmouseout="tooltip.hide();">TEXTO SOBRE EL QUE APARECE LA TOOLTIP</span>TEXTO
Vamos a ver el HTML completo del ejemplo del autor de la tooltip:
<p id="text">Lorem ipsum dolor sit amet, <span class="hotspot" onmouseover="tooltip.show('Testing 123 <strong>Testing 123</strong>');" onmouseout="tooltip.hide();">consectetuer adipiscing</span> elit. Aliquam id tellus. Nulla orci enim, vulputate et, pharetra eget, imperdiet non, sem. Mauris sit amet mi nec nulla porttitor dapibus. Curabitur leo sem, lacinia sed, commodo eu, mattis sit amet, felis. Ut tortor. Donec <span class="hotspot" onmouseover="tooltip.show('Testing 123<br />Testing 123');" onmouseout="tooltip.hide();">porttitor orci</span> et neque. Curabitur eget diam at libero egestas suscipit. In tortor est, ullamcorper eu, dapibus et, condimentum nec, nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis vel <span class="hotspot" onmouseover="tooltip.show('<img src=\'http://.../x_icon.gif\'/>');" onmouseout="tooltip.hide();">purus eget diam</span> aliquam luctus. Nullam risus ipsum, aliquam et, lacinia sit amet, fermentum vel, mi. In hac habitasse platea dictumst. Maecenas et dui non tortor lobortis feugiat. Donec eleifend iaculis arcu. Cras vitae leo nec nunc rhoncus laoreet. Integer eget enim. Nunc <span class="hotspot" onmouseover="tooltip.show('<strong>Lorem ipsum dolor sit amet</strong><br />Consectetuer adipiscing elit. Praesent lacinia, dui ut consequat bibendum, lorem dolor tristique tellus, at faucibus nibh est in orci. In pede.');" onmouseout="tooltip.hide();">dignissim cursus</span> mi. Donec eros.</p>
Parece un poquito enrevesado, pero no lo es tanto...
En la página original podéis encontrar, como siempre, el zip del script, las imágenes y el HTML.
✍ ¿Quieres hacer algún comentario? ✍