Búsqueda personalizada

Tooltips para 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:

  1. <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:

  1. <DIV style=“BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 75px”>
  2. Soy un DIV con contenido
  3. </DIV>

div.jpg

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:

  1. <DIV TITLE=“header=[Información Extra] body=[Ahora te brindo mas información]“ STYLE=“BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 75px”>
  2. Soy un DIV con contenido
  3. </DIV>

divtolpi.jpg

Enlace normal

HTML:

  1. <a href=“http://www.borchani.com”> Borchani </a>

enlace.jpg

Enlace con tooltips

HTML:

  1. <span title=“header=[borchani]body=[Blog sobre diseño y recursos online]“>
  2. <a href=“http://www.borchani.com”> Borchani </a></span>

enlacetoolpi.jpg

Compartir :FacebookGoogle+LinkedInTwitter
Publicado en Javascript,scripts,Web 2.0 | Responder

Novedades