CODEWITHSUNDEEP
twitter-bootstraptooltiptwitter-bootstrap-3
xXPhenom22Xx
xXPhenom22Xx

Reputation: 1275

Bootstrap 3 Tooltips or Popovers doesn't work

I have a Django application with the front-end designed in Twitter Bootstrap 3. All of the my styling and JS is working fine including the modals, etc... But I cannot for the life of me get the tooltips of popovers to do anything....

I am not throwing any errors in Firebug.

Here is the order of my includes:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>

Here is my an example call for the tooltip I took straight from the bootstrap site:

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

Anyone else have trouble with the 2 elements?

I am fairly certain it is something dumb I've done.

All other JS affects provided in Bootstrap 3 like the modals & tabs are working fine...

Upvotes: 13

Views: 35197

Answers (3)

user12195433
user12195433

Reputation: 1

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 popovers on a page would be to select them by their data-toggle attribute:

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

Upvotes: 0

J.C. Gras
J.C. Gras

Reputation: 5442

Tooltips must be initialized with jQuery:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

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

Check this link

Upvotes: 2

steakchaser
steakchaser

Reputation: 5239

You just need to enable the tooltip via javascript:

$('some id or class that you add to the above a tag').tooltip()

Upvotes: 38

Related Questions