Bootstrap工具提示CSS不起作用 [英] Bootstrap tooltip css not working

问题描述

我正在尝试使工具提示起作用，顺便说一句，但是由于未知原因，没有CSS应用于工具提示.由于整个网站都可以在Bootstrap本身(Wordpress插件)中正常运行，因此我在这个项目上挠头了.

I am trying to get the tooltip to work, which does btw, but no CSS is applied to the tooltip for reasons unknown. Since the whole site works fine in bootstrap itself (Wordpress plugin), I am scratching my head on this item.

代码如下.

<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(); 
});

工具提示在屏幕的左侧显示为未样式(应在项目下方)，但未显示样式.我的bootstrap插件是最新的，并且运行css版本(v3.3.6)，所以我想知道是否需要获取外部页面才能获得bootstrap工具提示.

The tooltip appears unstyled on the left side of my screen (while it should be below the item) unstyled. My bootstrap plugin is up to date and runs css version (v3.3.6), so I am wondering if there is an external sheet I need to get for the bootstrap tooltip.

它没有说: http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

推荐答案

有时，您只需要调用它并找到其他解决方案即可.我不明白为什么它不会出现(所以，实际上，它可能不在那个引导版本中)，所以，我用一些简单的CSS编写了自己的工具提示.这不是我想要的解决方案，但最终解决了我的问题.

Sometimes you just have to call it and find a different solution. I couldnt understand why it wouldn't appear, (so indeed, it may have not been in that bootstrap version) so instead, i wrote my own tooltip with a bit of simple css. It's not the solution I wanted, but it solved my problem in the end.

有兴趣吗?

.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>

这篇关于Bootstrap工具提示CSS不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！