Question

I am trying to enable the bootstrap tooltips in Gantry 4.

The bootstrap javascript is loaded, as bootstrap.min.js as is jquery.

I added the following to the index.php file just before the closing body tag

<script type="text/javascript">
  $(document).ready(function () {
    $("[rel=tooltip]").tooltip();
  });
</script>

I seem to have a conflict as I get the following error:

TypeError: 'undefined' is not a function (evaluating '$(document).ready(function () {
  $("[rel=tooltip]").tooltip();
})')

The text that is supposed to trigger the tooltip is:

<a href="#" rel="tooltip" data-placement="top" data-original-title="Depuis le 1er juin 2004, la durée légale de la vie séparée a été réduite de quatre à deux ans.">le cas d&rsquo;un mariage de longue durée</a>

Can someone please point out what I need to do to resolve this? Thanks.

Sorry, I forgot to add the link to the site and page where the tooltip is not functioning.

http://gobet.ergonomiq.net/divorce-séparation/divorce/26-requérir-seul-le-divorce-après-deux-ans-de-séparation#

Answer 1

You have MooTools active on the website, so the $ selector doesn’t work like it would if jQuery were the primary $ selector agent. You’ll need to convert the uses of $ where jQuery is expected to use jQuery instead.

Example:

$(selector here)

should be:

jQuery(selector here)

And everything else will work fine.