工具提示未正确显示答案

【问题标题】：Tooltip not displaying right工具提示未正确显示
【发布时间】：2017-01-17 15:11:51
【问题描述】：

当我尝试将tooltip 放在字形图标上时，它似乎无法正常工作。但是当我把它放在瓷砖外面时它工作正常。我很困惑，任何帮助将不胜感激！

这是我所说的 jsfiddle：https://jsfiddle.net/noe3mdvx/

HTML：

<div class="col-sm-9" style="display:inline-block">
</div>
<div class="row">
    <div class="panel panel-default col-xs-2 lp-centerNav-panel" style="position: relative;" >
        <div class="tipText">
            <p>
                <span data-toggle="tooltip" title="Hooray!" class="glyphicon glyphicon-question-sign">
                </span>
            </p>
        </div>
        <div class="panel-body">
            <strong>Accounting</strong>
        </div>
     </div>
 </div>
</div>

完整的 HTML：

            <div class="row">
            <div class="panel panel-default col-xs-2 lp-centerNav-panel" data-ng-repeat="menuItem in lp.MenuItems" data-ng-click="lp.Redirect(menuItem);" style="position: relative;">
                <div class="tipText">
                    <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="Hooray!"></span>
                </div>
                <div class="panel-body">
                    <strong data-ng-bind="menuItem.LinkText"></strong>
                    <img data-ng-src="{{menuItem.ImageUrl}}" />
                </div>
            </div>
        </div>

JS：

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

【问题讨论】：

不要认为你的小提琴有效 - 它所做的只是在悬停时将盒子向上移动
第 2 行的结束 div 是否正确？这似乎有点不对劲..？
正如我所见，它工作正常，jsfiddle.net/panamaprophet/noe3mdvx/2（我通过在其中包含一个 jquery 来修复你的 jsfiddle 示例）
@Pete 应该是这样的，但是当您将字形图标悬停时，它不会正确显示工具提示。
啊，对，我不确定它是否遗漏了什么，因为当我悬停图标时没有任何反应。此外，您的小提琴中没有上述 js（不确定它是否是引导程序的一部分）

标签： javascript jquery html jquery-ui-tooltip

【解决方案1】：

在您的 JSFiddle https://jsfiddle.net/noe3mdvx/ 中，我发现没有编写任何 js 代码，并且没有为您的代码选择 jQuery

尝试添加js代码

$('[data-toggle="tooltip"]').tooltip();

并选择任何jQuery 版本

希望对你有帮助。

【讨论】：