工具提示无法正确显示

时间:2017-01-17 15:11:51

标签: javascript jquery html jquery-ui-tooltip

当我尝试在glyphicon上放置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();
});

1 个答案:

答案 0 :(得分:0)

在您的JSFiddle https://jsfiddle.net/noe3mdvx/中,我发现没有编写js代码而没有为您的代码选择Should Be Equal As Strings ${search_string.strip()} ${search_box.strip()}

尝试添加js代码

jQuery

并选择任何$('[data-toggle="tooltip"]').tooltip(); 版本

它可以帮助你。