Tooltip not showing

Question

I have a problem with my prompt. I want my prompt to be like this:

But my result is this:

The following is the HTML and jQuery code:

 <td style="padding-left:5px;padding-right:5px;" align="left" data-toggle="tooltip" data-placement="top" data-container="body" title="segment" >

<script type="text/javascript">
    $(function () {
        $("[data-toggle='tooltip']").tooltip();
    });
</script>

I am using bootstrap version 3.3.2.

Hi everybody.

Thank.

Answer 1

I think this may be due to the fact that it is inside the element <tr>. This affects positioning due to styles on <tr>, which force it into an unexpected position.

quick fix or maybe just check if this can add a tooltip in <span>inside<td>

$(function () {
    $('.table1 td').tooltip({title:"test",placement:"bottom"});
    $('.table2 td span').tooltip({title:"test",placement:"bottom"});
});

.container{
  margin-top:20px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <table class="table table-bordered table1">
      <tr>
        <td>
            standard td - tooltip inside of tr tag
        </td>
      </tr>
    </table>
  </div>
</div>

<div class="container">
  <div class="row">
    <table class="table table-bordered table2">
      <tr>
        <td>
          <span>
            tooltip item wrapped in span tag
            </span>
        </td>
      </tr>
    </table>
  </div>
</div>

Run codeHide result

Answer 2

, .

<a href="#" data-toggle="tooltip" data-placement="right"
       title="" data-original-title="Tooltip on right"
       class="black-tooltip">Tooltip on bottom</a>

Answer 3

Your code looks fine, I use this html in the example

<table>
  <tr>
    <td style="padding-left:5px;padding-right:5px;" align="left" data-toggle="tooltip" data-placement="top" data-container="body" title="segment" >
      TEST
    </td>
  </tr>
</table>

http://jsfiddle.net/o6ncwhsb/1/

Importing a jQuery user interface or other tooltip plugin? Perhaps this could be a rewrite of css styles. Since then I have had a similar problem ...