3

I'm having an issue where if I apply the class "tooltip" to an object it will disappear, but this only happens when I'm using bootstrap and I'm wondering if anyone knows a workaround. I will provide examples of both.

Here is without bootstrap:

$(document).ready(function() {
  $('.tooltip').tooltipster();
});
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.min.js"></script>

<i class="fa fa-facebook-square fa-2x tooltip" title="Working!"></i>

Here is the snippet with bootstrap:

$(document).ready(function() {
  $('.tooltip').tooltipster();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>    
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/css/tooltipster.min.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.0.5/js/jquery.tooltipster.min.js"></script>

<i class="fa fa-facebook-square tooltip" title="Working!"></i>

If you go to the second one where the icon is hidden and hover over the top left you can see the tooltip show up but it doesn't help me if my icon is hidden.

AndrewL64
  • 15,794
  • 8
  • 47
  • 79
Mr.Smithyyy
  • 2,157
  • 12
  • 49
  • 95
  • 2
    Why don't you use the inbuild tooltip available with Bootstrap instead?? Here's the official doc of it: http://getbootstrap.com/javascript/#tooltips – AndrewL64 Mar 25 '15 at 22:27
  • Thanks for the tip! I missed that in the docs. – Mr.Smithyyy Mar 25 '15 at 22:59
  • For the record I agree with @AndrewLyndem bootstrap provides the 'tooltip' functionality and theres no reason to use different JS that provides nearly the same thing. – crazymatt Mar 26 '15 at 17:16

2 Answers2

5

The reason its not showing up is you are using a generic class name .tooltip and Bootstrap uses that same CSS name for its tooltip. If you look at the DOM you will see that Bootstraps tooltip code is setting the opacity:0; and the position:absolute;which is the reason why you dont see the Font Awesome icon anymore. If you change your class name and JQuery call, the icon and tooltip shows up correctly.

<i class="fa fa-facebook tooltip-custom" title="Working!"></i>

<script type="text/javascript">
$(document).ready(function() {
    $('.tooltip-custom').tooltipster();
});
</script>

hope that helps.

crazymatt
  • 3,266
  • 1
  • 25
  • 41
1

As Matt mentioned above, there is a conflict between the external tooltip and the default Bootstrap tooltip. And as I've mentioned in the comments, I would recommend you to use the inbuild tooltip available with Bootstrap instead.

Here's the official doc for the Bootstrap Tooltip: http://getbootstrap.com/javascript/#tooltips

AndrewL64
  • 15,794
  • 8
  • 47
  • 79