CODEWITHSUNDEEP
jquerycsstooltip
user1761494
user1761494

Reputation: 125

Bootstrap tool tip doesn't work?

Hello I read everything about the tooltips and it's JS.

  1. bootstrap never included the download for bootstrap-tooltip.js, therefore I just linked bootstrap.js file.

my javascript:

    <script type="text/javascript">
$('.link').tooltip()
</script>

My HTML

<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>!

I tried moving the js to footer, under the div, to head, to top, and it doesn't work.. the javascript doesn't even start. it doesn't even show the default tooltip.

My page: http://justxp.plutohost.net/jonydesigns/tos.php

My whole tos.php page: http://pastebin.com/qSe9NES7

Could someone please find out why doesn't the tooltip show up? I have included the bootstrap css too, the whole website is build with it actually.

Thanks!

Upvotes: 2

Views: 6681

Answers (2)

P.Brian.Mackey
P.Brian.Mackey

Reputation: 44285

The fix for this issue is defined in the documentation:

For performance reasons, the tooltip and popover data-apis are opt in, meaning you must initialize them yourself.

However, this description I found to be quite vague and should have included an example. Tooltips need to be "initialized". In this case you can do this on document ready:

jQuery

$('.link').tooltip();

Then the markup you provided will display the tooltip on mouseover.

<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>!

Also note that bootstrap.js does include bootstrap-tooltip.js. To see this open bootstrap.js and look for:

/* ===========================================================
 * bootstrap-tooltip.js v2.3.1
 * http://twitter.github.com/bootstrap/javascript.html#tooltips
 * Inspired by the original jQuery.tipsy by Jason Frame

On a related note, "initialization" is also required for popovers. E.G.

Markup

<a id="somePopoverId" href="#" rel="popover" class="btn btn-large btn-danger" data-content="Hello world!" title="" data-toggle="popover" data-original-title="A whatever" data-container="body">Popover</a>

jQuery

$("a[rel='popover']").popover({
                placement: "top",
                trigger: "hover"
            });

Or more simply...

 $("#somePopoverId").popover({
                placement: "top",
                trigger: "hover"
            });

Upvotes: 3

Dennis Traub
Dennis Traub

Reputation: 51634

1: You're not linking the required bootstrap-tooltip.js anywhere. (At least I can't find it in your code.)

2: Your JavaScript code should be surrounded by$(document).ready( ... ):

$(document).ready(function() {
    $('.link').tooltip();
});

Upvotes: 4

Related Questions