CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Reynier
Reynier

Reputation: 2478

Twitter Bootstrap Tooltip isn't working

I have this HTML:

<li><a href="<?php echo $home; ?>" title="Go Home" data-placement="bottom" rel="tooltip"><?php echo $text_home; ?></a></li>

And then in a external file a have this code:

function showtooltip() {
    $('a[rel="tooltip"], button[rel="tooltip"], input[rel="tooltip"]').tooltip({
        animation: true
    });
}

$(document).ready(function() {
   showtooltip();
});

But tooltip aren't showed. I include jquery (latest 2.0.0) and also complete TB (2.3.1) where is the problem? (please take a look at second edit maybe there is the problem)

EDIT I also has included this CSS files:

<link href="/catalog/view/theme/viaenvia/stylesheet/bootstrap.min.css" rel="stylesheet">
<link href="/catalog/view/theme/viaenvia/stylesheet/font-awesome.css" rel="stylesheet">
<link href="/catalog/view/theme/viaenvia/stylesheet/bootstrap-responsive.min.css" rel="stylesheet">

So I think CSS isn't the problem

EDIT2 I'm using jQuery UI latest (1.10.2) and aparently JS and CSS from jQuery UI are overwriting Twitter Bootstrap. This are the lines where I include CSS (JS are included at bottom for performance)

<link rel="stylesheet" href="/catalog/view/theme/viaenvia/stylesheet/bootstrap.min.css" />
<link rel="stylesheet" href="/catalog/view/theme/viaenvia/stylesheet/font-awesome.css">
<link rel="stylesheet" href="/catalog/view/theme/viaenvia/stylesheet/bootstrap-responsive.min.css" />

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="/catalog/view/theme/viaenvia/stylesheet/style.css">
<link rel="stylesheet" href="/catalog/view/theme/viaenvia/stylesheet/flexslider.css">
<link rel="stylesheet" href="/catalog/view/theme/viaenvia/js/fancybox/jquery.fancybox.css">

How can avoid this?

Upvotes: 0

Views: 1827

Answers (1)

Felipe Castro
Felipe Castro

Reputation: 1613

Your sample code is working (see this fiddle), so it's probably a missing javascript reference.

For using the tooltip you need to include bootstrap.js (with all plugins) or at least the bootstrap-tooltip.js (see options on customize download page), after the reference to jquery.

(after user comments below)

I would recommend checking two things now:

  • at the Net tab, try to find the request for bootstrap.min.js file and see if it completed successfully
  • at the Console tab, run that selector $('a[rel="tooltip"], ... to see if it finds the tags; if it does, you should be able to call something like $('#element').tooltip('show') to test the tooltip was successfully loaded.

Upvotes: 3

Related Questions