Tooltip not working (Bootstrap)

21,770

Solution 1

In Bootstrap 3 you can do this a lot easier and you don't need to initaite the $(document) part.

Change the html to

<a href="#" data-toggle="tooltip" title="pista 1"> Aliquam</a>

And the in the script

$('[data-toggle="tooltip"]').tooltip({'placement': 'bottom'});

Note: You can change the placement and there are various options all here in the docs

Solution 2

bootstrap tool-tip it is incompatible with jquery ui! if you're using jquery ui remove it!

21,770

dabadaba

Updated on June 01, 2020

Comments

dabadaba almost 4 years

I am new to Bootsrap and I am just getting to know it. I am trying to use the tooltip javascript utility, I have done everything how it's supposed to be done according to the webpage, the source code I saw and some answers I found here, but it doesn't work.

Here's where I intend to use it in the HTML:

<!-- Hola mundo -->
<div class="row">
  <div class="starter-template tab-content">
    <div class="tab-pane fade in active tooltip-demo" id="home">
      <h1>¡Hola, mundo!</h1>
      <p class="lead">Nunc sit amet nunc dui. <a href="#" data-toggle="tooltip" data-original-title="Pista 1">Aliquam</a> nec viverra mi, et pellentesque sem. In dapibus sem ut consectetur dignissim. </p>
    </div>
    <!-- /div#home -->
  </div>
  <!-- /div.starter-template -->
</div>
<!-- /div.row -->

Since the utility needs to be loaded manually, this is what I did:

<script>
  $(document).ready(function (){
    $('.tooltip-demo').tooltip({
      selector: "[data-toggle=tooltip]",
      container: "body"
    })
  });

This script is loaded at the footer of the page, after jQuery being loaded.

dabadaba over 10 years

I don't think it works either, now I see a tooltip but it's not using the bootstrap tooltip utility, and I am sure of this because if I change the value of placement either in the script or using data-placement the tooltip is still shown on the bottom. I think this "fake" tooltip appears when using the title attribute, it does't with the data-original-title attribute.
Adam Brown over 10 years

This is how I use it on one of my sites and I have full control, via <script></script> of its position and all other options. Do you have a full instal of Bootstrap? Where did you get the data-orginal-title from? Its not mentioned in the docs getbootstrap.com/javascript/#tooltips
dabadaba over 10 years

Yes, I checked all the plugins when I downloaded the precompiled version. I got the data-original-title attribute from the source code in the page where it explaing how it works.
Adam Brown over 10 years

Is this what you are seeing? bootply.com/103240 This is how I use it, you can change position in the JS
dabadaba over 10 years

No, just nothing happens when I hover the link. If I use title instead a white box with the asigned string appears, and always in the bottom, what means that Bootstrap tooltip is not working.
Adam Brown over 10 years

Did you check the Bootply that I sent? Did you try editing the JS? Perhaps it is a browser issue then because the Bootply produces a tooltip identical to the Bootstrap one for me in Safari, Firefox and Chrome. It could also be you have conflicting CSS?
dabadaba over 10 years

Yes of course I checked it. Funny thing, look: jsfiddle.net/7grZx Here it works, but not my own web page, and I just copied it from it.
Adam Brown over 10 years

That is odd. In that case I'm guessing it's some conflicting code in your page or the position of where you have included the bootstrap files. In some sites I make the JS has to be before </body> in others in the <head></head>
dabadaba over 10 years

The CSS files are included in the head obviously, and the JS before the body closing tag. Also, I don't think there can be conflict with CSS, I am just using the bootstrap one and one of my own where I just change the properties of the body, a class for scrollspy and for dropdown. Then there's the class starter-template, used by the div where the piece of code where the tooltip is, but it just changes the padding and text-align.
dabadaba over 10 years

I got it!!!!! I checked the source code of my web page. Apparently some WEIRD character sneaked in my code. Before the closing tag of the script where tooltip is activated I saw this:  and it was totally messing with the script. Either it was invisible or really hard to see, but I didn't see it. Thanks for the help @Adam Brown !
Adam Brown over 10 years

Pleasure, glad to have helped :)
IvanZh almost 10 years

+1 and some addition from 3.1.1 docs: 'For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.'
Scott Harrison over 9 years

Rather than remove it check out this answer: stackoverflow.com/questions/13731400/… Using a custom version of JqueryUI without the tooltip feature included.