Bootstrap 工具提示 css 不起作用

Question

我試圖讓工具提示工作，順便說一句，但由於未知原因，沒有將 CSS 應用於工具提示。 由於整個站點在 bootstrap 本身（Wordpress 插件）中運行良好，因此我在這個項目上摸不着頭腦。

代碼如下。

<a href="tel:<?php echo $phone;  ?>" data-toggle="tooltip" title="<?php echo $phone; ?>"  data-placement="bottom">
    <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
        <i class="fa fa-phone fa-stack-1x"></i>
    </span> 
</a>

還有JS。

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

工具提示在我的屏幕左側顯示為無樣式（而它應該在項目下方）無樣式。 我的引導程序插件是最新的並且運行 css 版本 (v3.3.6)，所以我想知道是否需要為引導程序工具提示獲取外部表。

它沒有說： http : //www.w3schools.com/bootstrap/bootstrap_tooltip.asp

Answer 1

你必須把 bootstrap.min.js 放在 jquery-ui.js 之后！ 它的全部。

<script type="text/javascript" src="path/jquery.js"></script>
<script type="text/javascript" src="path/jquery-ui.js"></script>
<script type="text/javascript" src="path/bootstrap.min.js"></script>

Answer 2

確保 bootstrap.js 或 bootstrap.min.js 包含在您的項目中。

請您嘗試以下操作

請插入這段javascript代碼

<script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    });
</script>

並在 Html 文件中添加此 html 部分

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Answer 3

有時您只需要調用它並找到不同的解決方案。 我不明白為什么它不會出現，（所以實際上，它可能沒有出現在引導程序版本中）所以相反，我用一些簡單的 css 編寫了我自己的工具提示。 這不是我想要的解決方案，但它最終解決了我的問題。

有興趣嗎？

.tooltip {
    position: relative;
    display: inline-block;
    font-size: 16px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
     position: absolute;
     z-index: 1;
    width: 120px;
    top: 100%;
     left: 50%; 
     margin-left: -60px; 
    font-size: 12px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

和修改后的代碼

<a href="tel:<?php echo $phone;  ?>" class="tooltip">
    <span class="tooltiptext"><?php echo $phone; ?></span>
    <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x fa-inverse"></i>
        <i class="fa fa-phone fa-stack-1x"></i>
    </span> 
</a>

Answer 4

嘗試使用data-original-title而不是title

Answer 5

還要在您的 HTML/代碼中包含“bootstrap-tooltip.js”

<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>