引导工具提示css不起作用

Question

我正在尝试让工具提示工作，它可以执行btw，但由于未知原因，没有将CSS应用于工具提示。由于整个网站在引导程序本身（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/Code 中还包括"引导工具提示.js"

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