Symptom
Javascript error in browser console: "Uncaught TypeError: Cannot read property 'Constructor'", in js/tooltip.js:

var options = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, $element.data());

Cause
The issue is that jQueryUI tooltip has replaced $.fn.tooltip with its code and the above relies upon and assumes that Bootstrap's tooltip code is still there. The scripts are currently loaded in this order:

  1. Core's jQuery and jQueryUI widget, but not the tool tip
  2. Bootstrap
  3. jQueryUI Tooltip (obliterating Bootstraps function at $.fn.tooltip).

Discussion
This issue has been discussed in general (outside the context of Drupal Bootstrap) here:
https://stackoverflow.com/questions/13731400/jqueryui-tooltips-are-compe...

One might argue simply don't use both bootstrap tooltips (popups) and jQueryUI tooltips, but alas, jQueryUI is bundled with core and contrib modules rely upon it. This makes it impossible to use bootstrap tooltips without changing the order in which the scripts are loaded or some other technique. I see references to using jQueryUI widget.bridge in advance of loading bootstrap, as well as bootstrap's noConflict referenced.

Steps to reproduce
Install Drupal Bootstrap and a contrib module that uses jQueryUI Tooltip.
Create content that causes the contrib module to include jQueryUI Tooltip.
Add the needed attributes to some element for a bootstrap tool tip (data-toggle="tooltip" and title="whatever")
Observe the above javascript error.

Proposed solution
Not sure. I tried using the jQueryUI widget.bridge, but was unsuccessful. You need to run that code before boostrap loads, but at that point, jQueryUI Tooltip isn't loaded yet. Catch 22.

Or maybe bootstrap noConflict (which I think allows the ability to rename the function). I'm not sure what the compatibility issues of that would be.

You could prophalatically load jQueryUI Tooltip (and I think button has the same problem) prior to loading bootstrap, but this would increase the payload.

Other solutions?

Update
Webform has a bootstrap integration sub-module (webform_bootstrap) that causes webform to avoid including jQueryUI Tooltip. This removes the issue for webform users, but this issue would still be true for any other contrib module that uses jQueryUI tooltip (and others such as button, I believe). Maintainers should feel free to defer this issue or close it as won't fix if desired.

Versions used
(latest current of all)
Bootstrap 3.19
Webform 5.3
Drupal 8.7.1

Comments

DanChadwick created an issue. See original summary.

DanChadwick’s picture

Title: Drupal Bootstrap incompatible with jQuery UI Tooltip and hence Webform » Drupal Bootstrap incompatible with jQuery UI Tooltip
Issue summary: View changes
markhalliwell’s picture

Category: Bug report » Support request
Status: Active » Closed (won't fix)

One might argue simply don't use both bootstrap tooltips (popups) and jQueryUI tooltips, but alas, jQueryUI is bundled with core and contrib modules rely upon it.

Correct. Don't use jQuery UI tooltips if plan on using Bootstrap.

Modules shouldn't be using jQuery UI for tooltips at all IMO. The purpose of a module is to provide data/back-end functionality/markup, not front-end UI functionality like this (that's really the theme's job).

The problem is that a lot of module developers don't want their module to "look ugly" or "basic", so they look to the stuff bundled with core (which in this case is jQuery UI) and pick and choose stuff to implement without fully understanding what it does or how it works.

Nevermind entertaining the concept of completely replacing the library with something different (better).

Module developers need to get out of the UI business, plain and simple.

If a module, like webform, is willing to provide an alternative solution... I suppose that's "fine". In reality though, it really shouldn't be targeting a specific framework like that. A module should build its code in an abstract way that doesn't rely on 3rd party libraries that can easily get replaced on the front-end.

drupalfan2’s picture

I have the same JavaScript error but I can not find out how to solve it. I do not use the webform module.
Can you help?