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

• javascript
• jquery
• css
• twitter-bootstrap
• twitter-bootstrap-3

• Please include more code HTML markup without the PHP to reproduce the issue a little table. – DaniP Commented Jan 7, 2015 at 16:14
• @Danko I've added a test table snippet as well, please have a look – MMK Commented Jan 7, 2015 at 16:24

5 Answers 5

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'});

BootplyDemo

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->

<!-- Latest piled JavaScript -->
<script src="https://maxcdn.bootstrapcdn./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.