工具提示箭头不会出现

Question

我的工具提示有问题。 我希望我的工具提示是这样的：

但我的结果是这样的：

以下是我的HTML＆amp; Jquery代码：

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

我使用的是bootstrap 3.3.2版。

真的很感谢你的帮助。

谢谢。

Answer 1

我认为这可能与它位于<tr>元素中的事实有关。这会影响定位，因为<tr>上的样式会将其强制置于意外位置

一个快速解决方案，或者只是为了检查是否会将工具提示添加到<span>

内的<td>

＆＃13;

＆＃13;

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

＆＃13;

.container{
  margin-top:20px;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用此演示，将获得所需的工具提示。 Demo

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

Answer 3

您的代码似乎没问题，我在示例中使用此html

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

您是要导入JQuery UI还是工具提示的其他插件？也许它可能会覆盖CSS样式。我以前遇到过类似的问题...