引导工具提示不工作

我快疯了。

我有以下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示例的源代码，在那里的任何地方都看不到任何启动工具提示的东西。所以我猜它应该可以工作，还是我错过了一些重要的东西?

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

谢谢你的帮助!

当前回答

这是最简单的方法。把这个放在</body>之前:

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

查看Bootstrap文档中给出的关于工具提示的示例。

例如:

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>

2014-08-05 13:18:27

其他回答

如果你正在用javascript创建包含工具提示的html，然后将其插入到文档中，你必须在插入html到文档后激活弹出窗口/工具提示，而不是在文档加载时…

2013-07-17 23:49:19

总而言之:使用jQuery选择器激活工具提示

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

事实上，你不需要使用属性选择器，你可以在任何元素上调用它，即使它的标签中没有rel="tooltip"。

2012-02-26 14:14:51

快速和更轻的选择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”组成。可以使用其他选择器选项。

希望能有所帮助。

2017-05-13 16:40:58

添加data-toggle="tooltip"在你想要的任何元素的工具提示。

2017-09-30 06:54:53

你必须把工具提示javascript放在html后面。像这样:

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script>

或者使用$(document)。准备好:

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

工具提示不工作，因为你把工具提示html放在javascript之前，所以他们不知道是否有一个javascript的工具提示。在我看来，剧本是从头到尾读的。

2014-01-28 08:48:38

引导工具提示不工作

推荐文章

最新文章

标签