Bootstrap tooltips not working

2020-01-26 12:43发布

站内问答 / 后端开发
1326 25 4

I'm going mad here.

I've got the following HTML:

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

And the Bootstrap style tooltip refuses to display, just a normal tooltip.

I've got bootstrap.css working just fine, and I can see the classes in there

I've got all of the relevant JS files at the end of my HTML file:

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

I've looked at the source of Bootstrap's example and cannot see anything that initiates the tooltip anywhere in there. So I'm guessing it should just work, or am I missing something vital here?

I've got modals and alerts and other things working just fine, so I'm not a total moron ;)

Thanks for any help!

25条回答
我命由我不由天
2楼-- · 2020-01-26 13:24

You need to do the following. Add the

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

code somewhere on your page (preferably in the <head> section).

Also add data-toggle: "tooltip" to anything you want to enable with it.

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
3楼-- · 2020-01-26 13:25

Add data-toggle="tooltip" at whatever elements you want with a tooltip.

查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
4楼-- · 2020-01-26 13:26

Tooltip and popover are NOT only-css plugins like dropdown or progressbar. To use tooltips and popover, you MUST to activate them using jquery (read javascript).

So, lets say we want a popover to be shown on click of an html button.

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

Then you need to have following javascript code to activate popover:

$('.popovers-to-be-activated').popover();

Actually, above javascript code will activate popover on all the html elements which have class "popovers-to-be-activated".

Needless to say, put the above javascript inside DOM-ready callback to activate all popovers as soon as DOM is ready:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});
查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
5楼-- · 2020-01-26 13:27

After experiencing the same problem, I found this solution worked without having to add additional tag attributes outside of the Bootstrap required attributes.

HTML

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

JQuery

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

Hope this helps!

查看更多
0人赞 添加讨论(0) 举报
【Aperson】
6楼-- · 2020-01-26 13:27

Put your code inside document ready

$(document).ready(function () {
    if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
    }
});

In my case I was also missing the tooltip css classes on http://twitter.github.com/bootstrap/assets/css/bootstrap.css so son't forget that.

查看更多
0人赞 添加讨论(0) 举报
淡お忘
7楼-- · 2020-01-26 13:28

I just added:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

below bootstrap.min.js and it works.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4 5 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)