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 7 years 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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 7 years 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