Jquery tooltip scrolls the contents of the table

Question

Jquery tooltip scrolls the contents of the table

Navigation

#1 by (3 votes)

3

I have a table html similar to this:

<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>

And the tooltip I add it like this:

<script type="text/javascript">

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

The problem is the following, when I show the table it is done correctly

But when I move the mouse over so that the tooltip appears, the columns are misplaced

This is how the table stays when the tooltip is working

<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>

jquery html css

asked by Lombarda Arda 31.05.2017 в 09:17

source

1 answer

How to get the names of the files in a directory? C ++ Doubt with decimals Android (BigDecimal)

score 3 · Accepted Answer

Because of the way in which jQuery tooltips work, you will need to create an element <span> (I prefer this one because it is neutral) or another element (like a <div> if you want it to be the complete cell) in which to assign the events If you do it in a <tr> or <th> you will create elements in the DOM that will break the design of the table ( <div> between <td> and <td> are not allowed, for example).

Version with <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>

Version with <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>

Notice the difference between the two:

<span> : The tooltip is shown pointing to the center of the value, but if we take the mouse out of it, even if we remain inside the cell, the tooltip disappears.
<div> : The tooltip is shown pointing to the center of the cell, and if we take the mouse out of the value but we stay inside the cell the tooltip remains visible.