0

I've been working on a project using Prototype, jQuery and Bootstrap. We use Bootstrap Tooltips in our UI, normally over icons and text, as below:

<span class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="bottom" title="Some tooltip"></span>

<span class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="bottom" title="Another tooltip"></span>

<a href="#" data-toggle="tooltip" data-placement="bottom" title="Link tooltip">Link tooltip</a>

We then use some simple Javascript to activate our tooltip:

var _j = jQuery.noConflict();
_j("[data-toggle=\"tooltip\"]").tooltip();

I'm using _j alias of jQuery as the $ prefix is used by Prototype. This works fine, but as soon as you move your mouse from a tooltip'd element, it has style="display: hidden; applied. I can't work out any reasonable explanation, so was wondering if anyone has any ideas?

Here is a jsFiddle.

Ahmet Emre Kilinc
  • 5,489
  • 12
  • 30
  • 42
Benedict Lewis
  • 2,733
  • 7
  • 37
  • 78
  • Make sure that Prototype loads before jQuery and jQuery.noConflict(). They have to be in that order. Your fiddle has them in a different order, but I don't know enough about fiddle to say for certain if that's possible to change. Your fiddle does work if I remove the Prototype framework entirely. – Walter Mar 29 '14 at 14:41
  • Take a look at my answer to another similar question. http://stackoverflow.com/a/15095654/341491 – Geek Num 88 Apr 01 '14 at 00:06

2 Answers2

0

use this trick to solve the problem:

$('.tooltips').tooltip().on('hidden.bs.tooltip', function(){
     jQuery(this).show();
});
phpniki
  • 758
  • 4
  • 13
0

You could use display:block !important within your CSS file. Doing this, it will force the element to show, even when the script is telling them to hide.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
Wolfgang Leon
  • 695
  • 9
  • 20