工具提示無法正確顯示

當我嘗試將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

工具提示無法正確顯示

回答

相關問題