ElTicus.com

Programación, lenguajes y recursos para programadores

Truco
Como colocar un tooltip sobre los elementos de mi p谩gina
Utilizando HTML, JAVASCRIPT y CSS
Publicado por JL Fecha: 2007-03-20 19:12:34 Idioma: Espa帽ol Tipo de documento: Truco

Como colocar un tooltip (cuadrito de ayuda) sobre los elementos de mi p谩gina

El siguiente c贸digo nos ense帽a como hacer que en nuestra p谩gina aprezca un cuadrito con informaci贸n de ayuda.


NOTA: Se corrigi贸 el error del desplazamiento generado en Internet Explorer cuando se "escrolaba" la p谩gina.


La idea es que ese cuadrito contenga informaci贸n estilizada con HTML y no solo el cl谩sico "tool tip" color crema que se ve demasiado simple.

La siguiente imagen muestra como se ver铆a la ayuda al posicionar el cursor sobre un bot贸n de ayuda.

[imagen en="archivos/tooltip.gif"]

NOTA: El dise帽o de la ayuda soporta todo tipo de HTML, aunque en el ejemplo se simplific贸 para no complicar demasiado el c贸digo.


A continuaci贸n tenemos el c贸digo completo y m谩s abajo se explican a detalle cada una de las secciones:


<html>
<head>

  <script language=javascript>
    // ********** Parte 1: Inicializar valores
      window.onload = init;
      MouseX=0;
      MouseY=0;
    // ********** Parte 2: Funciones
    
      // Funci贸n para capturar el evento "Mouse Move" (al moverse el mouse)
      function init() {
        if (window.Event) {
          document.captureEvents(Event.MOUSEMOVE);
        }
        document.onmousemove = getXY;
      }
      // Funci贸n que actualiza la posici贸n del rat贸n
      function getXY(e) {
        MouseX = (window.Event) ? e.pageX : (event.clientX + document.body.scrollLeft);
        MouseY = (window.Event) ? e.pageY : (event.clientY + document.body.scrollTop);         

      }
      
      // Funci贸n que aparece y desaparece el cuadrito de la ayuda
      function  hint( id, status ) 
      {
          var htmObj = document.getElementById(id)
          if(!htmObj)  return ;
          htmObj.style.visibility = status ? 'visible' : 'hidden';
          htmObj.style.top = (MouseY+20) + 'px';
          htmObj.style.left = (MouseX+20) + 'px';
      }
  </script>
  <!--  //********** Parte 3: Estilos -->
  <STYLE type="text/css">
    .help {
      cursor: help;
     }
     
    .hint {
      background-color: #FFEEAA;
      font-family: verdana,arial,helvetica;
      visibility: hidden;
      font-size: 8pt;
      position: absolute;
      padding: 1px 2px;
      border: 1px solid #000000;
      color: #006600;
      width: 200px;
      left: 328px;
     }
  </STYLE>

</head>
<body>
<!--  // ********** Parte 4: Cuadritos con las ayudas 
      //                     NOTA: Cada una debe tener un id diferente  -->
<div id="ayuda1" class="hint">
  <b>Telfono</b><br /><br />
  Introduce solamente nmeros, sin guiones ni espacios.<br /><br />
  Ejemplo: 01555123456
</div>
<div id="ayuda2" class="hint">
  <b>Descriptores</b><br /><br />
  Puedes introducir palabras clave o bin frases, separando cada una de ellas 
  por un puto y coma.<br /><br />
  Ejemplo: Javascript;CSS;HTML
</div>
<div id="ayuda3" class="hint">
  <b>Nmero de Cuenta</b><br /><br />
  Captura tu Nmero de cuenta sin introducir guiones ni espacios. 
  Puedes tomarlo de la parte superior izquierda de tu credencial<br /><br />
  Ejemplo: 978371
</div>


<!--  // ********** Parte 5: Cuerpo de la p谩gina
      //                     Definimos los objetos que van a llevar la ayuda  -->


<img src="ayu.gif" width="19" height="19" class="help"
               onmouseover="javascript:hint('ayuda1',1)"
               onmouseout ="javascript:hint('ayuda1',0)" />

<br><br><br><br>

<img src="ayu.gif" width="19" height="19" class="help"
               onmouseover="javascript:hint('ayuda2',1)"
               onmouseout ="javascript:hint('ayuda2',0)" />

<br><br><br><br>

<img src="ayu.gif" width="19" height="19" class="help"
               onmouseover="javascript:hint('ayuda3',1)"
               onmouseout ="javascript:hint('ayuda3',0)" />

<br><br><br><br>

</body>
</html>

Dentro de la secci贸n HEAD de nuestro c贸digo HTML insertamos dos secciones, una de c贸digo en JAVASCRIPT y un bloque de definici贸n de Estilos (STYLE).

Secci贸n JAVASCRIPT

Comenzamos indicandole que en el evento onload (Despues de cargar) se ejecute nuestra funci贸n init(). La cual establece que cada vez que se mueva el rat贸n, se ejecute la funci贸n getXY(). en esta funci贸n se actualizan las variables globales MouseX y MouseY


    // ********** Parte 1: Inicializar valores
      window.onload = init;
      MouseX=0;
      MouseY=0;
    // ********** Parte 2: Funciones
    
      // Funci贸n para capturar el evento "Mouse Move" (al moverse el mouse)
      function init() {
        if (window.Event) {
          document.captureEvents(Event.MOUSEMOVE);
        }
        document.onmousemove = getXY;
      }
      // Funci贸n que actualiza la posici贸n del rat贸n
      function getXY(e) {
        MouseX = (window.Event) ? e.pageX : (event.clientX + document.body.scrollLeft);
        MouseY = (window.Event) ? e.pageY : (event.clientY + document.body.scrollTop);         
      }


Posteriormente tenemos una funci贸n llamada hint() que recibe como par谩metro el ID del cuadrito de ayuda y un valor de estado que puede ser 0 (cero) o 1 (uno), donde 1=Aparecer y 0=ocultar.

      // Funci贸n que aparece y desaparece el cuadrito de la ayuda
      function  hint( id, status ) 
      {
          var htmObj = document.getElementById(id)
          if(!htmObj)  return ;
          htmObj.style.visibility = status ? 'visible' : 'hidden';
          htmObj.style.top = (MouseY+20) + 'px';
          htmObj.style.left = (MouseX+20) + 'px';
      }


Secci贸n de Estilos (STYLE)

B谩sicamente definiremos 2 estilos, uno llamado .help que nos define el cursor de ayuda predeterminado del navegador y otro llamado .hint que contendr谩 los estilos b谩sicos para cada cuadrito de ayuda como son Colores, bordo, fuentes, tama帽os, etc.

Le aplicaremos el estilo .help a los elementos que vayamos a asociarles el tooltip.


  <!--  //********** Parte 3: Estilos -->
  <STYLE type="text/css">
    .help {
      cursor: help;
     }
     
    .hint {
      background-color: #FFEEAA;
      font-family: verdana,arial,helvetica;
      visibility: hidden;
      font-size: 8pt;
      position: absolute;
      padding: 1px 2px;
      border: 1px solid #000000;
      color: #006600;
      width: 200px;
      left: 328px;
     }
  </STYLE>

Secci贸n de Contenido (BODY)

Ya dentro del cuerpo de la p谩gina (BODY) vamos a iniciar definiendo los cuadritos que van a fungir como ayudas-tooltips. Cada uno de ellos deber谩 aplicarsele la clase .hint y se le asigna un ID el cual deber谩 ser 煤nico. Hay que tener mucho cuidado de que no le asignemos el mismo ID a mas de un objeto porque nos podr铆a dar resultados inesperados.

Un ejemplo de una de las ayudas ser铆a:

<div id="ayuda3" class="hint">
  <b>Nmero de Cuenta</b><br /><br />
  Captura tu Nmero de cuenta sin introducir guiones ni espacios. 
  Puedes tomarlo de la parte superior izquierda de tu credencial<br /><br />
  Ejemplo: 978371
</div>

Cabe mencionar que dentro del DIV podemos poner cualquier cantidad de texto y que se pueden utilizar todo tipo de elementos HTML, como pueden ser ligas, imagenes, fuentes, colores, etc.


Y finalmente definimos los objetos que van a contener dicha ayuda

<img src="ayu.gif" width="19" height="19" class="help"
               onmouseover="javascript:hint('ayuda1',1)"
               onmouseout ="javascript:hint('ayuda1',0)" />

en este ejemplo se lo estoy aplicando a una imagen del tipo:

Pero se le puede aplicar a practicamente cualquier elemento como puede ser una liga, un parrafo, un DIV, etc.

Y simplemente le agrego los par谩metros siguientes:

class="help"
onmouseover="javascript:hint('ayuda1',1)"
onmouseout ="javascript:hint('ayuda1',0)"

en donde la primera l铆nea es para cambiar el cursor normal por el cursor de ayuda.
La segunda es para indicarle que cuando el raton est茅 encima (Mouseover) aparezca la ayuda1 (valor uno)
Y por 煤ltimo la tercera l铆nea le indica que cuando el cursor del rat贸n deje de estar encima (Mouseout) se desaparezca (valor cero).

Espero y les sea de utilidad. Lo he probado en Mozila (Firefox) y en Internet Explorer 6 con buenos resultados.




Nadie ha puesto ning鷑 comentario todav韆


Haz un comentario sobre este tema
Nombre email (no se muestra)
comentario:
Escribe las 2 letras que ves aqu: Imagen anti-spam =




No hay comentarios

Art韈ulos relacionados:
manual Curso B谩sico de HTML Recurso no clasificado Check de dise帽o Recurso no clasificado Est谩ndares en Internet Recurso no clasificado Como colocar un relojito en una p谩gina WEb y que se est茅 refrescando cada segundo. Recurso no clasificado Como cambiar el color de las barras de scroll del explorador
Tip Como mandar par谩metros a una aplicaci贸n de Flash en Internet Explorer y Mozilla Truco Como proteger las im谩genes de tu sitio Web contra copia. Truco Como hacer tablas con esquinas redondas con CSS y HTML Recurso no clasificado Las funciones para codificar y descodificar un URL (c贸digo fuente) Recurso no clasificado Las funciones para codificar y descodificar un URL (c贸digo fuente en Visual Basic)
Recurso no clasificado Implementaci贸n del juego: Piedra papel o Tijeras en Javascript / Html