Trouble getting bootstrap tooltips to work on Joomla 3.0 with Gantry 4 Framework

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.

Answer 2

Ensure that you have only 1 jQuery library being loaded and that it is at the top of the list. If not, then your bootstrap.min.js file won't work.

If this is done and it's still not working, try adding the code like so:

$document = JFactory::getDocument(); //remove is this line is already being used
$js = "$(document).ready(function(){
          $('[rel=tooltip]').tooltip();
       });";
$document->addScriptDeclaration($js);

Hope this helps.

Answer 3

Add the bootstrap framework to the component.php of your template: JHtml::_('bootstrap.framework'); This should solve the ".tooltip is not a function" error

Answer 4

1. In your Joomla Project, open templates/<your-template-name>/index.php .
2. find JHtml::_('behavior.framework', true); and comment it out.

OR You can just replace the word behavior with bootstrap .