CODEWITHSUNDEEP
htmlcsstwitter-bootstraptooltip
Carol.Kar
Carol.Kar

Reputation: 5345

Bootstrap - Tooltip is not showing

I have created a new website (it is on a sub-domain atm). However, the tooltip on the text Get the FinEco Bookmarklet is not shown.

<span class="bookmarklet"><span class="fa fa-bookmark"></span> Get the
<br>
<a title="" data-original-title="" class="has-tooltip" onclick="return false;" data-toggle="tooltip" data-placement="bottom" data-title="Drag this link to your bookmark bar. Click the bookmark when you want to submit an article." href="javascript:(function(){ window.open('http://fineconomy.com/?link='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title)); })();">FinEco  Bookmarklet</a>
</span>

Any recommendations why?

I appreciate your replies!

Upvotes: 3

Views: 7973

Answers (4)

yusufshakeel
yusufshakeel

Reputation: 449

here is the code. hope it helps.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Index Page</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <span class="bookmarklet"><span class="fa fa-bookmark"></span> Get the
    <br>
    <a title="" data-original-title="" class="has-tooltip" onclick="return false;" data-toggle="tooltip" data-placement="bottom" data-title="Drag this link to your bookmark bar. Click the bookmark when you want to submit an article." href="javascript:(function(){ window.open('http://fineconomy.com/?link='+encodeURIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title)); })();">FinEco  Bookmarklet</a>
    </span>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

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

and the screenshot

enter image description here

Upvotes: 2

KAD
KAD

Reputation: 11102

Upon inspecting your element in dev tools the title is empty on the element :

    <a href="/web/20151001210831/http://growthhackers.com/privacy_policy" 
data-original-title="" title=""><span class="fa fa-bookmark"></span> FinEco Bookmarklet</a>

Make sure to set the title and call the bootstrap .tooltip() function:

jQuery(document).ready(function(){
   jQuery('a').tooltip()
});

Update:

It seems you have unset reference to jquery $ variable, this means some code you are using have used jQuery.noConflict() so the global jquery object is now assigned to the jQuery variable and not the $ variable.

So when you call your tooltop you shall use jQuery instead instead of $.

At the element level (the a tag) you have not set the title attribute title='your text' in your a tag so the tooltip will not work, your tag shall be as below:

<a href="/web/20151001210831/http://growthhackers.com/privacy_policy" 
title="Drag this link to your bookmark bar. Click the bookmark when you want to submit an article."><span class="fa fa-bookmark"></span> FinEco Bookmarklet</a>

Upvotes: 2

Thieu Nguyen
Thieu Nguyen

Reputation: 1078

We need to initialize tooltip inside $(document).ready(){}) before using it.

Noticed that, from Bootstrap website, they said:

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:

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

In your case, please add jQuery('[data-toggle="tooltip"]').tooltip() inside ready() function. It will work.

Upvotes: 3

yusufshakeel
yusufshakeel

Reputation: 449

you need to have this in your js file.

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

check bootstrap website http://getbootstrap.com/javascript/#tooltips

Upvotes: 2

Related Questions