工具提示无法正确显示

当我尝试将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(); 
});

来源

2017-01-17 Kyle Ries

不认为你的小提琴的工作原理 - 它所做的只是在悬停时将箱子向上移动 – Pete

是第2行中的结尾div是否正确？那似乎有点... ..？ – DasSaffe

它工作正确，因为我看到，https://jsfiddle.net/panamaprophet/noe3mdvx/2/（我通过在其中包含一个jquery来修正你的jsfiddle示例） –

在你的jsfiddle https://jsfiddle.net/noe3mdvx/我发现没有JS代码编写，并为您的代码不选择jQuery

尝试添加js代码

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

，并选择任何jQuery版本

它可以帮助你。

来源

2017-01-17 16:17:21 Jigarb1992

工具提示无法正确显示

回答

相关问题