我快疯了。

我有以下HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

引导样式的工具提示拒绝显示,只是一个普通的工具提示。

我有bootstrap。css工作得很好,我可以看到里面的类

我已经在我的HTML文件的末尾得到了所有相关的JS文件:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

我已经查看了Bootstrap示例的源代码,在那里的任何地方都看不到任何启动工具提示的东西。所以我猜它应该可以工作,还是我错过了一些重要的东西?

我有模态和警报和其他东西工作得很好,所以我不是一个完全的白痴;)

谢谢你的帮助!


当前回答

使用最新的Jquery库,如果你使用最新的bootstrap 2.0.4和Jquery -1.7.2.js,你不需要任何Jquery选择器

只需使用rel="tooltip" title="Your title " data-placement=" " "

根据您的意愿在数据放置中使用顶部/底部/左/右。

其他回答

从工具提示上的引导文档

由于性能原因,工具提示是可选择的,因此必须自己初始化它们。 初始化页面上所有工具提示的一种方法是根据它们的数据-选择它们 切换属性:

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

快速和更轻的选择Bootstrap工具提示插件:

HTML:

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS:

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT:

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
}); 

标签/文本必须包含在类“mytooltip”的包装器中,该包装器必须有一个Id。

标签之后是工具提示文本,包装在类“mytooltiptext”的div中,id由父包装器的id +“_tttext”组成。可以使用其他选择器选项。

希望能有所帮助。

http://getbootstrap.com/javascript/#tooltips-usage

可选功能 出于性能考虑,工具提示和弹出窗口数据api是可选择的,这意味着

您必须自己初始化它们。

初始化页面上所有工具提示的一种方法是通过它们的data-toggle属性选择它们:

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

将这段代码放在HTML中可以使用工具提示

例子:

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

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

在遇到同样的问题后,我发现这个解决方案可以工作,无需在Bootstrap所需属性之外添加额外的标记属性。

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

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

您需要完成以下操作。添加

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

在页面的某处编写代码(最好是在<head>部分)。

还可以添加data-toggle: "tooltip"到任何你想启用它的地方。