Tooltip herramienta de ayuda para web con jquery javascript y css

Un tooltip (también llamada descripción emergente) es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Los tooltip son una variación de los globos de ayuda y es un complemento muy usado en programación y diseño, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.

Hoy en dia existen varias herramientas para utilizar un tooltip como por ejemplo Poshy Tip jQUery Plugin que es una buena herramienta a utilizar permitiendonos mostrar infromación o incluso imágenes de Flirck dentro del tooltip .

Pero hoy vamos a presentar este tooltip de forma que usted podrá modificar el estilo a su gusto y conveniencia..

Archivos a utilizar:

index.html

tooltip.css

tooltip.js

jquery.com

Dentro del index.html entre <head> vamos a colocar los archivos js para realizar las llamadas de los archivos a utilizar..

<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="tooltip.js"></script>
    <link href="tooltip.css" type="text/css" rel="stylesheet">

el tooltip.css es modificable en color texto entre otras propiedades css que deseen..

#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:2px 5px;
    color:#333;
    display:none;
}

tooltip.js realizaremos las operaciones necesarias para su funcionamiento..

jQuery.fn.tooltip=function(){
    xOffset = 10;
    yOffset = 0;
    this.each(function(){
        $(this).hover(function(e){
            // Cogemos el valor del tag "title"
            this.t = this.title;
            // Ponemos el tag "title" del html vacio para que el navegador no 
            // muestre su tooltip estandard
            this.title = "";
            // Añadimos una p con el id="tooltip" para mostrar el texto
            $("body").append("<p id='tooltip'>"+ this.t +"</p>");
            // Lo posicionamos cerca de la posición del ratón
            $("#tooltip")
                .css("top",(e.pageY + yOffset) + "px")
                .css("left",(e.pageX + xOffset) + "px")
                .fadeIn();
        },
        function(){
            // Funcion que se ejecuta cuando el raton deja de pasar por encima
            
            // Volvemos a poner el titulo en el codigo html
            this.title = this.t;
            // eliminamos el id tooltip que hemos añadido al pasar por encima
            $("#tooltip").remove();
        });
        
        // Funcion que se ejecuta cuando nos movemos por encima
        // Posiciona el tooltip justo al lado del mouse
        $(this).mousemove(function(e){
            $("#tooltip")
                .css("top",(e.pageY + yOffset) + "px")
                .css("left",(e.pageX + xOffset) + "px");
        });
    });
    return this;
};

$(document).ready(function(){
    $(".tooltip").tooltip();
});

Para utilizar el tooltip deberás colocar la clase tooltip creada en el javascript para obtener el efecto deseado ejm.

<div class="tooltip" title="Aqui hay un tooltip">demostracion del tooltip</div>
   <a href="#" class="tooltip" title="Aqui hay un tooltip">demostracion del tooltip</a>
   <img src='' class="tooltip" title="Aqui hay un tooltip" />

jQuery.js tendrás que descargar de su web o utilizar sus hosted CDN alojadas en servidores gratuitos alrededor del mundo…

Demostración

Relacionado