I'm using twitter bootstrap 3
to display tooltip
<td class = "skills" data-toggle="tooltip" data-placement="left" data-original-title="<?php echo $row['skills']; ?>"><?php echo $row['skills']; ?></td>
and it shows well but when I hover on it, it shift each cell to right.
how to fix that?
I've attached two snapshots and you can see it's shifting towards right.
Edit
I'm adding a test table here, what it does, displays tooltip in next td
and data of that td
shifted right.
<table id="example-table" class="table table-striped table-hover table-condensed">
<thead>
<th>Serial</th>
<th>Name</th>
<th>Rating</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td data-toggle="tooltip" data-placement="right" data-original-title="A">A</td>
<td>php</td>
</tr><tr>
<td>2</td>
<td data-toggle="tooltip" data-placement="right" data-original-title="B">B</td>
<td>C#</td>
</tr>
</tbody>
</table>
and here is js
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
I found the solution, just posting here so that someone may find this useful some day.
So, anyone if faces this issue, I mean if moving data around on hover and buttons bounce on hover while using twitter-bootstrap tooltip
, you just need to do the following: Previous
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
just need to add container(fixed in bootstrap 2.3)
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
});
</script>
Ok the problem was the tooltip
is inserted by default right after the html
element that has the property. As the toolltip is a div
element is breaking your table:
The structure will be like:
<td></td>
<div></div>
<td></td>
Wich is invalid. You need to change that behavior changing the container wich has the tooltip
:
$('[data-toggle="tooltip"]').tooltip({container:'body'});
Don't use directly for td use span tag hope it will works:
<table id="example-table" class="table table-striped table-hover table-condensed">
<thead>
<th>Serial</th>
<th>Name</th>
<th>Rating</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><span data-toggle="tooltip" data-placement="right" data-original-title="A">A</span></td>
<td>php</td>
</tr><tr>
<td>2</td>
<td><span data-toggle="tooltip" data-placement="right" data-original-title="B">B</span></td>
<td>C#</td>
</tr>
</tbody>
</table>
You need to use few attribute inside tooltip function {container:'body', trigger: 'hover', placement:'left'}
$(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip( {container:'body', trigger: 'hover', placement:"left"} ); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <table id="example-table" class="table table-striped table-hover table-condensed"> <thead> <th>Serial</th> <th>Name</th> <th>Rating</th> </thead> <tbody> <tr> <td>1</td> <td data-toggle="tooltip" data-placement="right" data-original-title="A">A</td> <td>php</td> </tr><tr> <td>2</td> <td data-toggle="tooltip" data-placement="right" data-original-title="B">B</td> <td>C#</td> </tr> </tbody> </table>
from CSS just remove "position: relative" from body or HTML tag.
It will work nicely.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.