Crear Tooltip usando javaScript

En el post anterior puse un ejemplo de como crear tooltips personalizados usando únicamente CSS para los que no saben javaScript o no lo quieren usar. En esta ocasión os comparto el código necesario para que lo puedas usar si te gusta y las explicaciones de que es lo que he hecho.

Como comentaba en el post anterior en HTML se pueden crear tooltips usando el atributo title, aunque no se puede personalizar su estilo y solo pueden tener texto plano.

Para crear el tooltip de esta forma es necesaria una función javaScript, un CSS y un elemento de HTML que llame a la función.

El CSS pues puede ser como quieras, lo único obligatorio es que el posicionamiento sea absoluto, para que se muestre por encima del resto de la página y no descoloque todo. El z-index lo he dejado de la versión con solo CSS donde si era necesario pero aquí en principio no es necesario siempre y cuando no se estén creando otras partes del HTML de forma dinámica y se creen después (Lo ultimo que se crea es lo que se muestra por delante).


.toolTip{
    background: rgba(20,20,20,0.9) url('img/info.gif') center left 5px no-repeat;
    border: 2px solid #87cefa;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #333;
    color: #87cefa;
    font-size: 0.8em;
    padding: 10px 10px 10px 35px;
    max-width: 600px;
    position: absolute;
    z-index: 100;   
}

Aunque he indicado que el posicionamiento es absoluto la posición no se debe de indicar en el CSS ya que será distinta para cada tooltip y también comentar que aunque en la versión con solo CSS se debía de hacer que el tooltip estuviese oculto y que solo se mostrase cuando estuviese el ratón encima del elemento en el que se quería mostrar el tooltip, en este caso no es necesario y aunque se podría hacer una función en onmouseover que lo mostrase y otra en onmouseout que lo ocultase he optado por utilizar una única función que se ejecute cuando se de el evento onmouseover y que sea esta la que lo muestre o lo oculte cuando pase el ratón para hacer que sea más cómodo de utilizar, pues mejor llamar a una función que a dos.

En cuanto al estilo del elemento que tendrá el tooltip no he hecho nada ya que dependiendo del tipo que se podrían aplicar distintos estilos, ademas no se puede modificar con la función javaScript ya que solo se ejecuatara cuando el ratón pase por encima y no tendría mucho sentido que no tuviese el estilo hasta la primera vez que pasase por encima. Para tener un estilo uniforme en todos los elementos se podría crear un clase y hacer que todos los elementos que tengan tooltips sean de esa clase, pero como decia esto no tiene que ver con el tooltip en si (Al final del post puedes descargar el codigo completo para crear toolTips y un ejemplo de uso).

La función para crear el tooltip es esta:


function mostrarTooltip(elemento,mensaje){

    // Si no existe aun el tooltip se crea
    if (!document.getElementById(elemento.id+"tp") ){
        // Dimensiones del elemento al que se quiere añadir el tooltip
        anchoElemento = $('#'+elemento.id).width();
        altoElemento = $('#'+elemento.id).height();
        
        // Coordenadas del elemento al que se quiere añadir el tooltip
        coordenadaXElemento = $('#'+elemento.id).position().left;
        coordenadaYElemento = $('#'+elemento.id).position().top;

        // Coordenadas en las que se colocara el tooltip
        x = coordenadaXElemento + anchoElemento/2 + 20;
        y = coordenadaYElemento + altoElemento/2 + 10;

        // Crea el tooltip con sus atributos
        var tooltip = document.createElement('div');
        tooltip.id = elemento.id + "tp";
        tooltip.className = 'toolTip';
        tooltip.innerHTML = mensaje;
        tooltip.style.left = x + "px";
        tooltip.style.top = y + "px";

        // Añade el tooltip
        document.body.appendChild(tooltip); 
    }

    // Cambia la opacidad del tooltip y lo muestra o lo oculta (Si el raton esta encima del elemento se muestra el tooltip y sino se oculta)
    $('#'+elemento.id).hover(
        function(){
            tooltip.style.display = "block";
            $('#'+tooltip.id).animate({"opacity" : 1});

        },
        function(){
            $('#'+tooltip.id).animate({"opacity" : 0});
            setTimeout(
                function (){
                    tooltip.style.display = "none";
                }, 
                400
            );
            
        }
    );     
}

Tampoco es demasiado complicada, simplemente se comprueba si ya se ha creado el tooltip (como es lógico solo hay que crearlo una vez) y si no se ha creado aun pues se obtienen las coordenadas y las dimensiones del elemento del que se quiere mostrar el tooltip para colocar el tooltip en una posición adecuada, no tiene por qué ser exactamente como esta hecho pero tampoco será muy distinto si se quiere que quede bien. Después se crea un div (o un span, aside o lo que mejor se vea) para el tooltip, y se le da un id, se le pone la clase que hemos hecho antes en el CSS y se le agrega el mensaje que se le pasa a la función (el texto que se mostrara en el tooltip que puede contener imágenes, inputs, enlaces, tablas o lo que sea necesario) y finalmente se establece la posición en la que se mostrará (Recordar en el CSS se ha puesto que tendrá posicionamiento absoluto) y se añade al HTML.

El código anterior solo se ejecuta la primera vez en las sucesivas solo se ejecutaran las ultimas líneas que lo que hacen es hacer uso de la funcion hover(accion1, accion2) de JQuery para mostrar u ocultar el tooltip según se deba hacer. La primera parte de la función hover es la que se ejecuta cuando el ratón esta sobre el elemento, en este caso se hace que el tooltip se muestre (display=»block») y se cambia la opacidad a 1 con unaanimación para que no aparezca el tooltip de golpe. Y la segunda parte es la que se ejecuta cuando el ratón deja de estar sobre el elemento que hace lo mismo que en la primera pero poniendo la opacidad a 0 para que se oculte y hay que añadir la función setTimeout para que espere el tiempo que dura la animación antes de hacer display=»none».

En un primer momento no me habia dado cuenta de que es necesario ocultar el tooltip con display para que no se muestre ni ocupe espacio porque si el tooltip queda encima de algun enlace o algun elemento del estilo no se podría usar porque estaria debajo del tooltip aunque no lo viesemos, pero al hacer un ejemplo para compartirlo me di cuenta.

Y lo que queda es ver como usarlo, solo hay que llamar a la función en el evento onmouseover y listo (bueno y obviamente cargar el archivo con la función javaScript y el CSS).


<input type="text" id="nombre" onmouseover="mostrarTooltip(this,'Tu nombre');"/>
<a href="#" id="enlace" onmouseover="mostrarTooltip(this,'Mira un enlace que tiene en su tooltip una tabla <table><tr><td>Celda 1,1</td><td>Celda 2,1</td></tr><tr><td>Celda 1,2</td><td>Celda 2,2</td></tr></table>');">Un enlace</a>
<span id="texto" onmouseover="mostrarTooltip(this,'Lo que tu quieras poner');">Un texto</span>

Y si te ha gustado puedes descargarte el «proyecto» completo aquí.

3 Comments

  1. Cristian Maine 10 octubre, 2016 Reply
  2. Daniel 6 mayo, 2017 Reply
    • Iván Salas 6 mayo, 2017 Reply

Leave a Reply