Problem with tooltip created with css and jquery datatable

0

I'm creating a tooltip so that when I put on top of the text of each cell of a datatable, I'll see a tooltip with that text but the long version, and the datatable is not leaving me. It shows me the tooltip but it shows it to me inside the cell and there is no way to see the tootltip above the datatable. I've tried it increased the z-index of the tooltip but nothing. Any solution?

I attach the code:

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 (IN THE DATATABLE CONFIGURATION)

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

And that's how it looks with the aforementioned:

In the image I have the cursor over the text of the second cell, and the tooltip appears but inside the cell. Would there be a way to see it but outside the datatable / cell?

    
asked by M. Giner 19.04.2018 в 08:17
source

0 answers