Bootstrap tooltips not working

2020-01-26 12:47发布

站内文章 / 移动开发

11 0

走好不送

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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!

回答1:

To sum up: activate your tooltips using jQuery selectors

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

In fact, you don't need to use the attribute selector, you can invoke it on any element even if it doesn't have rel="tooltip" in its tag.

回答2:

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!

回答3:

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

回答4:

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

Opt-in functionality For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning

you must initialize them yourself.

One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

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

putting this piece of code in your html allows you to use the tooltips

Examples:

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

回答5:

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>

回答6:

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.

回答7:

If you do $("[rel='tooltip']").tooltip(); as other answers have suggested then you will activate tooltips only on elements that are currently there in DOM. That means if you are going to change DOM and insert dynamic content later it won't work. Also this is much less efficient because it installs event handler for individual elements as opposed to using JQuery event delegation. So the best way I've found to activate Bootstrap tooltips is this one line of code that you can place in document ready and forget about it:

$(document.body).tooltip({ selector: "[title]" });

Note that I'm using title as selector instead of rel=title or data-title. This has an advantage that it can be applied to many other elements (the rel is supposed to be only for anchors) and also it works as "fallback" for old browsers.

Also note that you don't need data-toggle="tooltip" attribute if you are using above code.

Bootstrap tooltips are expensive because you need to handle mouse events on each of the elements. This is the reason why they haven't enabled it by default. So if you ever decide to comment out above line, your page would still work if you use title attribute.

If you are OK not to use title attribute then I would recommend using pure CSS solution such as Hint.css or check http://csstooltip.com which does not require any JavaScript code at all.

回答8:

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>

回答9:

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();
});

回答10:

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>

回答11:

If everything is still not resolved Use Latest Jquery library, you dont need any of the jquery selectors if you use the latest bootstrap 2.0.4 and jquery-1.7.2.js

Just use rel="tooltip" title="Your Title" data-placement=" "

Use top / bottom / left / right in the data-placement as per your wish.

回答12:

I have added jquery and bootstrap-tooltip.js in header. Adding this code in footer works for me! but when i add the same code in header it doesn't work!

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

回答13:

If using Rails+Haml is much easier to include the tooltip, just do:

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

That is just add the following line at the end of the element.

:rel => "tooltip", :title => "Referential Guide"

回答14:

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.

回答15:

I just added:

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

below bootstrap.min.js and it works.

回答16:

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>

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

回答18:

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.

回答19:

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

回答20:

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.

回答21:

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

回答22:

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

回答23:

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.

回答24:

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();
});

回答25:

Quick and lighter alternative to Bootstrap tooltip plugin:

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);
});

Label/text must be enclosed in a wrapper of class "mytooltip" This wrapper must have an Id.

After the label there is the tool tip text wrapped in a div of class "mytooltiptext" and id consisting of the id of the parent wrapper + "_tttext". Other options for selectors can be used.

Hope it helps.

标签： twitter-bootstrap

走好不送

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

0条评论

还没有人评论过~

Bootstrap tooltips not working

问题:

回答1:

回答2:

回答3:

回答4:

回答5:

回答6:

回答7:

回答8:

回答9:

回答10:

回答11:

回答12:

回答13:

回答14:

回答15:

回答16:

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

回答17:

回答18:

回答19:

回答20:

回答21:

回答22:

回答23:

回答24:

回答25:

HTML:

CSS:

JSCRIPT:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

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