3

Tengo una tabla html similar a esta:

<table class="table table-striped table-custom table-responsive">
    <thead class="ordenable">
        <tr>                                     
            <th class="col-1" id="DIAC_1">L</th>
            <th class="col-1" id="DIAC_2">M</th>
            <th class="col-1" id="DIAC_3">X</th>
            <th class="col-1" id="DIAC_4">J</th>
            <th class="col-1" id="DIAC_5">V</th>                    
        </tr>
    </thead>            
    <tbody> 
        <tr>                
            <td class="danger" data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                74
            </td>
            <td class="danger" data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                74
            </td>
            <td class="danger" data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                75
            </td>
            <td class="danger" data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                75
            </td>
            <td class="danger" data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                74
            </td>                       
        </tr>
    </tbody>
</table>

Y el tooltip lo añado asi:

<script type="text/javascript">

    $("[data-toggle=tooltip]").tooltip();
</script>

El problema es el siguiente, cuando muestro la tabla se hace de manera correctaImagen sin tooltip

Pero cuando paso el ratón por encima para que el tooltip aparezca se me descolocan las columnas Imagen con tooltip

Así se queda la tabla cuando el tooltip esta funcionando

<table class="table table-striped table-custom table-responsive">
    <thead class="ordenable">
        <tr>                                                   
            <th class="col-1" id="DIAC_1">L</th>
            <th class="col-1" id="DIAC_2">M</th>
            <th class="col-1" id="DIAC_3">X</th>
            <th class="col-1" id="DIAC_4">J</th>
            <th class="col-1" id="DIAC_5">V</th>                    
        </tr>
    </thead>            
    <tbody>
        <tr>                
            <td class="danger" data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado." aria-describedby="tooltip106542">
                74
            </td>
            <!-- ESTA ES LA PARTE QUE CREA EL TOOLTIP -->
            <div class="tooltip fade top in" role="tooltip" id="tooltip106542" style="top: 30px; left: 866px; display: block;">
                <div class="tooltip-arrow" style="left: 50%;"></div>
                <div class="tooltip-inner">
                    El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.
                </div>
            </div>
            <!-- ---------------------------------------------------- -->
            <td class="danger" data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                74  
            </td>
            <td class="danger" data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                75  
            </td>
            <td class="danger" data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                75      
            </td>
            <td class="danger" data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                74  
            </td>

        </tr>
    </tbody>
</table>

1 respuesta 1

3

Por la forma en la que trabajan los tooltips de jQuery necesitarás crear un elemento <span> (prefiero éste por ser neutro) u otro cualquiera (como un <div> si quieres que sea la celda completa) en el que asignar los eventos. Si lo haces en un <tr> o <th> te creará elementos en el DOM que romperán el diseño de la tabla (no se permiten <div> entre <td> y <td>, por ejemplo).

Versión con <span>:

$("[data-toggle=tooltip]").tooltip();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table table-striped table-custom table-responsive">
    <thead class="ordenable">
        <tr>                                     
            <th class="col-1" id="DIAC_1">L</th>
            <th class="col-1" id="DIAC_2">M</th>
            <th class="col-1" id="DIAC_3">X</th>
            <th class="col-1" id="DIAC_4">J</th>
            <th class="col-1" id="DIAC_5">V</th>                    
        </tr>
    </thead>            
    <tbody> 
        <tr>                
            <td class="danger"><span data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                74</span>
            </td>
            <td class="danger"><span data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                74</span>
            </td>
            <td class="danger"><span data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                75</span>
            </td>
            <td class="danger"><span data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                75</span>
            </td>
            <td class="danger"><span data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                74</span>
            </td>                       
        </tr>
    </tbody>
</table>

Versión con <div>:

$("[data-toggle=tooltip]").tooltip();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table table-striped table-custom table-responsive">
    <thead class="ordenable">
        <tr>                                     
            <th class="col-1" id="DIAC_1">L</th>
            <th class="col-1" id="DIAC_2">M</th>
            <th class="col-1" id="DIAC_3">X</th>
            <th class="col-1" id="DIAC_4">J</th>
            <th class="col-1" id="DIAC_5">V</th>                    
        </tr>
    </thead>            
    <tbody> 
        <tr>                
            <td class="danger"><div data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                74</div>
            </td>
            <td class="danger"><div data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                74</div>
            </td>
            <td class="danger"><div data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                75</div>
            </td>
            <td class="danger"><div data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                75</div>
            </td>
            <td class="danger"><div data-toggle="tooltip" data-placement="top" data-html="true" title="" data-original-title="El total de usuarios (incluido monitor) excede la capacidad del autobús seleccionado.">
                74</div>
            </td>                       
        </tr>
    </tbody>
</table>

Fíjate la diferencia entre ambos:

  • <span>: El tooltip se muestra apuntando al centro del valor, pero si sacamos el ratón fuera de éste, aunque sigamos dentro de la celda, el tooltip desaparece.
  • <div>: El tooltip se muestra apuntando al centro de la celda, y si sacamos el ratón fuera del valor pero nos mantenemos dentro de la celda el tooltip se mantiene visible.
3
  • 1
    Funciona, muchas gracias Commented el 31 may. 2017 a las 7:35
  • De nada, un placer :) Commented el 31 may. 2017 a las 7:37
  • 1
    Funciona excelente. Gracias. Commented el 10 nov. 2017 a las 13:26

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.