0

Estoy creando tooltip para que al ponerse encima del texto de cada celda de un datatable se muestre un tooltip con ese texto pero la versión larga, y el datatable no me está dejando. Me muestra el tooltip pero me lo muestra dentro de la celda y no hay manera de que se vea el tootltip por encima del datatable. Lo he probado aumentado el z-index del tooltip pero nada. ¿Alguna solución?

Adjunto el código:

CSS

/* Clase que tendrá el tooltip */
    .claseTooltip {
        position: relative;     /* Esta clase tiene que ser posición relativa */
        color: #FF8C00;         /* Color de texto */
}

/* El tooltip */
.claseTooltip span {
    background: rgba(20, 20, 20, 0.9);
    border: 2px solid #87CEFA;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #333;
    color: #87CEFA;
    display: none;/* El tooltip por defecto estará oculto */
    font-size: 0.8em;
    padding: 10px 10px 10px 35px;
    max-width: 6000px;
    position: relative;  /* El tooltip se posiciona de forma absoluta para no modificar el aspecto del resto de la página */
    top: 15px;  /* Posición a partir de la parte superior del primer elemento madre con posición relativa */
    left: 100px; /* Posición a partir de la parte izquierda del primer elemento padre con posición relativa */
    z-index: 100000000000; /* Poner un z-index alto para que aparezca por encima del resto de elementos */
}

/* El tooltip cuando se muestra */
.claseTooltip:hover span {
    display: block; /* Para mostrarlo simplemente usamos display block, por ejemeplo */
}

JAVASCRIPT (EN LA CONFIGURACIÓN DEL DATATABLE)

columns: [
    {data: 
        function (data, type, row, meta) {
            if(data.observacion== null){
                return '';
            }else{
                return '<div class="claseTooltip">'+data.observacion+'<span>'+data.observacion+'</span></div>';
            }
        }
    },
],

Y así es como se ve con lo citado anteriormente: introducir la descripción de la imagen aquí

En la imagen tengo el cursor encima del texto de la segunda celda, y el tooltip aparece pero dentro de la celda. ¿Habría forma de que se viera pero fuera del datatable/celda?

7
  • 1
    ¿Puedes poner el HTML del tooltip renderizado? He hecho una prueba rápida y se muestra bien el tooltip jsfiddle.net/Kiko_L/xpvt214o/158067
    – Kiko_L
    Commented el 19 abr. 2018 a las 7:44
  • Claro, es que los elementos html no se crean en la parte html, se crean de forma dinámica con la configuracion del datatable. Las filas y columnas y todo eso se crea de forma dinámica.
    – Marcos
    Commented el 19 abr. 2018 a las 7:50
  • Por eso te decía si puedes mostrarnos el html renderizado :)
    – Kiko_L
    Commented el 19 abr. 2018 a las 7:55
  • Que significa mostrarlo renderizado? Discúlpeme pero soy nuevo en esto
    – Marcos
    Commented el 19 abr. 2018 a las 11:06
  • Simplemente que muestres cómo queda el HTML después de cargar las filas y columnas dinámicamente.
    – Kiko_L
    Commented el 19 abr. 2018 a las 11:07

1 respuesta 1

1

Tambien puedes agregar el position y el z-index en tu css para mostrar el tooltip en frente de todos los elementos de la tabla

.claseTooltip:hover span {
     display: block;
     z-index:9;
     position:absolute;
     width:100%;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.