[SOLVED] Tooltipster jQuery plugin and bootstrap together causing disappearing issue

Tooltipster jQuery plugin and bootstrap together causing disappearing issue

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.

Solution

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.