Skip Navigation

[Resolved] Bootstrap tooltip not working correctly

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to use Bootstrap's "tooltips" feature on my site. I have added the markup but the tooltips do not appear.

Solution: You have the markup correct:

<a href="javascript:void(0);" data-placement="right" data-toggle="tooltip" title="Valeur de la quote-part après expertise">Estimation Q/P</a>

However, you must also initialize the tooltips using JavaScript. Add the following code to your View JS panel or Content Template JS panel:

jQuery(document).ready(function () {
  jQuery('[data-toggle="tooltip"]').tooltip();
});

Relevant Documentation: https://getbootstrap.com/docs/3.3/javascript/#tooltips

This support ticket is created 6 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 2 replies, has 2 voices.

Last updated by bouchairY 6 years, 7 months ago.

Assisted by: Christian Cox.

Author
Posts
#582971
tooltip.png

Hello
bootstrap.js is loaded by toolset views plugin
plugins/wp-views/vendor/toolset/toolset-common/res/lib/bootstrap/js/bootstrap.min.js?ver=3.3.7'
but not working in my website when using this link

Estimation Q/P

Thank you

#583104

Hi, the markup looks okay but I can't see any initialization code. According to the Bootstrap docs, you must initialize tooltips yourself using JavaScript - they aren't automatically added based on markup alone. See "Opt-in functionality" here: hidden link

Their code uses the common "$" namespace, but when using Views, you should use the "jQuery" namespace instead of "$" to prevent conflicts. Always wrap your code in a document ready handler. Example:

jQuery(document).ready(function () {
  jQuery('[data-toggle="tooltip"]').tooltip();
});
#583108

Thank you

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.