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条回答

Deceive 欺骗

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

HTML

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

JQuery

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

This one is work for me.

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

趁早两清

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

in head section you need to add the following code first

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

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

Then in the body section you need to do write the following code

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

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

爷、活的狠高调

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

Lets use an example to show how the Tooltips can be added to any HTML element in your document.

NOTE:

If these tooltip samples don't work when you put them in your page, then you have another problem. You need to look at things like:

The order of scripts being included
See if you are trying to initialize HTML elements that have been removed
See if you are trying to call methods in JS files you are no longer including

See if you are including the JS file that provides the functionality you need (not just for tooltips, but any components you use on the page).

<head>
    <link rel="stylesheet" href="/Content/bootstrap.css" />
    <link rel="stylesheet" href="/Content/animate.css" />
    <link rel="stylesheet" href="/Content/style.css" />
</head>
<body>
    ... your HTML code ...
    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script src="/Scripts/app/inspinia.js"></script> <!-- if using INSPINIA -->
    ... your JavaScript initializers ...
</body>

Failure of ANY of the above items can (and often does) prevent javascript from loading and/or running, and that keeps everything nice and broken.

WORKING EXAMPLES

Let's say you have a badge, and you want it to show a tooltip when the user hovers over it.

Original HTML:

<span class="badge badge-sm badge-plain">Admin Mode</span>

Plain Bootstrap Tooltips

If you are creating tooltips for an HTML Element, and you are using Plain Bootstrap tooltips, then you will be responsible for calling the Tooltip Initializers with your own JavaScript code.

BEFORE

<span class="badge badge-sm badge-plain">Admin Mode</span>

AFTER

<span 
    class="badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INITIALIZER

<script>
    // Initialize any Tooltip on this page
    $(document).ready(function () 
        {
            $('[data-toggle="tooltip"]').tooltip();
        }
    );
</script>

Bootstrap Template Tooltips (such as INSPINIA)

If you are using a bootstrap template (such as INSPINIA), you are including a supporting script to support the template features:

    <script src="/Scripts/app/inspinia.js" />

In the case of INSPINIA, the included script automatically initializes all tooltips by running the following javascript code when the document is finished loading:

// Tooltips demo
$('.tooltip-demo').tooltip({
    selector: "[data-toggle=tooltip]",
    container: "body"
});

Because of this, you do NOT have to initialize INSPINIA-style Tooltips yourself. But you DO have to format your elements in a specific way. The Initializer looks for HTML elements with tooltip-demo in the class attribute, then calls the tooltip() method to initialize any child elements that have the attribute data-toggle="tooltip" defined.

For our example badge, place an outer element around it (like a <div> or <span>) that has class="tooltip-demo", then place the data-toggle, data-placement, and title attributes for the actual tooltip within the element that is the badge. Modify the original HTML from above to look something like this:

BEFORE

<span class="badge badge-sm badge-plain">Admin Mode</span>

AFTER

<span class="tooltip-demo">
    <span 
        class="badge badge-sm badge-plain" 
        data-toggle="tooltip" 
        data-placement="right" 
        title="Tooltip on right" 
     >Admin Mode</span>
</span>

INITIALIZER

None

Note that any child elements within the <span class="tooltip-demo"> element will have their tooltip properly prepared. I could have three child elements, all needing tooltips, and place them within one container.

Multiple Items, each with a Tooltip

<span class="tooltip-demo">
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="A Tooltip">Text 001</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Another Tooltip">Text 002</span>
    <span class="badge badge-sm badge-plain" data-toggle="tooltip" data-placement="right" title="Third Tooltip">Text 003</span>
</span>

The best use for this would be to add the class="tooltip-demo" to a <td> or an outermost <div> or <span>.

Plain Bootstrap Tooltips while using a Template

If you are using INSPINIA, but you don't want to add extra outer <div> or <span> tags to create tooltips, you can use standard Bootstrap Tooltips without interfering with the template. In this case, you will be responsible for initializing the Tooltips yourself. However, you should use a custom value in the class attribute to identify your Tooltip items. This will keep your Tooltip initializer from interfering with elements affected by INSPINIA. In our example, let's use standalone-tt:

BEFORE

<span class="badge badge-sm badge-plain">Admin Mode</span>

AFTER

<span 
    class="standalone-tt badge badge-sm badge-plain" 
    data-toggle="tooltip" 
    data-placement="right" 
    title="Tooltip on right" 
 >Admin Mode</span>

INITIALIZER

<script>
    // Initialize MY standalone tooltips, ignoring INSPINIA-affected elements
    $(document).ready(function () 
        {
            $('.standalone-tt').tooltip();
        }
    );
</script>

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

走好不送

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

From bootstrap docs on tooltips

Tooltips are opt-in for performance reasons, so you must initialize them yourself. One way to initialize all tooltips on a page would be to select them by their data- toggle attribute:

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

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

叛逆

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

In my particular case, it didn't work because I was including two versions of jQuery. One for bootstrap, but another one (another version) for Google Charts.

When I remove the jQuery loading for the charts, it works fine.

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

我想做一个坏孩纸

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

You must put the tooltip javascript after the html. like this :

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

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

</script>

Or use $(document).ready :

$(document).ready(function() {

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

});

</script>

The tooltip not working because you put the tooltip html before the javascript, so they don't know if there is a javascript for the tooltip. In my opinion, the script is read from the top to the bottom.

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

Bootstrap tooltips not working

NOTE:

WORKING EXAMPLES

Plain Bootstrap Tooltips

Bootstrap Template Tooltips (such as INSPINIA)

Multiple Items, each with a Tooltip

Plain Bootstrap Tooltips while using a Template

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

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

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