BoxOver: Agregando tooltips en nuestra web
BoxOver un sencillo script que utiliza Javascript/DHTML para permitirnos mostrar tooltips en una web. El tooltips básicamente es agregar información extra en algún div o texto, que se mostrara cuando pasemos el Mouse sobre ese elemento.
Descargamos el script tooltips de BoxOver.
Incluimos en nuestra cabecera entre las etiquetas < head > y < / head > la llamada.
JavaScript:
-
<script type='text/javascript' src='BoxOver.js'></script>
NOTA: Verificamos bien en “src” que la localización del script boxOver.js sea la correcta.
Ahora veamos ejemplos prácticos de como implementarlos a nuestros elementos.
Div Normal
Por ejemplo, si tenemos un “div” en nuestro documento.
HTML:
-
<DIV style="BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 75px">
-
Soy un DIV con contenido
-
</DIV>
Div con tooltips
Para hacer que un tooltip aparezca en nuestros elemento alteramos el código, agregando nuevos atributos: “title”, “header” ,“body”: como aquí:
HTML:
-
<DIV TITLE="header=[Información Extra] body=[Ahora te brindo mas información]" STYLE="BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 75px">
-
Soy un DIV con contenido
-
</DIV>
Enlace normal
HTML:
-
<a href="http://www.xyberneticos.com"> Xyberneticos </a>
Enlace con tooltips
HTML:
