8

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
  • 9,064
  • 21
  • 85
  • 155

2 Answers2

22

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

Adam Brown
  • 2,812
  • 4
  • 28
  • 39
  • 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. – dabadaba Dec 31 '13 at 16:23
  • This is how I use it on one of my sites and I have full control, via `` 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 http://getbootstrap.com/javascript/#tooltips – Adam Brown Dec 31 '13 at 16:35
  • 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. – dabadaba Dec 31 '13 at 16:41
  • Is this what you are seeing? http://www.bootply.com/103240 This is how I use it, you can change position in the JS – Adam Brown Dec 31 '13 at 16:49
  • 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. – dabadaba Dec 31 '13 at 16:51
  • 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? – Adam Brown Dec 31 '13 at 16:55
  • Yes of course I checked it. Funny thing, look: http://jsfiddle.net/7grZx/ Here it works, but not my own web page, and I just copied it from it. – dabadaba Dec 31 '13 at 16:59
  • 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 `

    ` in others in the `

    `

     – Adam Brown Dec 31 '13 at 17:04
  • 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 Dec 31 '13 at 17:06
  • 1
    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 ! – dabadaba Dec 31 '13 at 17:11
  • Pleasure, glad to have helped :) – Adam Brown Dec 31 '13 at 17:17
  • 2
    +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.' – IvanZh Apr 28 '14 at 13:53
6

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

ErshadQ
  • 91
  • 1
  • 4
  • Rather than remove it check out this answer: http://stackoverflow.com/questions/13731400/jqueryui-tooltips-are-competing-with-twitter-bootstrap/22087252#22087252 Using a custom version of JqueryUI without the tooltip feature included. – Scott Harrison Dec 19 '14 at 11:23