Bootstrap tooltips not working-第3页回答

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!

标签： twitter-bootstrap

25条回答

戒情不戒烟

2楼-- · 2020-01-26 13:16

you can use Popper.js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

And call tooltip function:

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

0人赞添加讨论(0) 举报

唯我独甜

3楼-- · 2020-01-26 13:17

If you are creating your html that contains the tooltip with javascript, and then inserting it into the document, you have to activate the popover/tooltip AFTER you have inserted the html into the document, not on document load...

0人赞添加讨论(0) 举报

冷血范

4楼-- · 2020-01-26 13:18

You dont need all js files separately

Just use the following files if you are going to use all bootstrap functions:

-bootstrap.css
-bootstrap.js

both of them can be found in http://twitter.github.com
and finally
-Latest version of jquery.js

For Glyphicons you need the image

glyphicons-halfings.png and/or glyphicons-halfings-white.png(white coloured images)
which u need to upload inside /img/ folder of u r website (or) store it where ever u want but change the folder directory inside the bootstrap.css

For tooltip u need the following script inside your <head> </head> tag

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

That's it...

0人赞添加讨论(0) 举报

The star\"

5楼-- · 2020-01-26 13:20

This is the simplest way. Just put this before </body>:

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

Check out the examples given in the Bootstrap's documentation about tooltips.

For example:

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

0人赞添加讨论(0) 举报

我命由我不由天

6楼-- · 2020-01-26 13:20

I had a similar issue and especially if you are running in a button container like a vertical button container. In that case you have to set the container as the 'body'

I have added a jsfiddle example

example

0人赞添加讨论(0) 举报

一纸荒年 Trace。

7楼-- · 2020-01-26 13:23

I know this is an old question, but since I had this problem with the new release of bootstrap and its not clear on the website, here is how you enable the tooltip.

give your element a class like "tooltip-test"

then activate this class in your javascript tag:

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

0人赞添加讨论(0) 举报

Bootstrap tooltips not working

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间