Problem
When both dmx toolstips and popovers are imported:
<script src="/dmxAppConnect/dmxBootstrap5Tooltips/dmxBootstrap5Tooltips.js" defer></script>
<script src="/dmxAppConnect/dmxBootstrap5Popovers/dmxBootstrap5Popovers.js" defer></script>
then this causes an error:
im.js:1 Bootstrap doesn't allow more than one instance per element. Bound instance: bs.tooltip.
The issue was caused by the DOMContentLoaded event listeners for both the tooltip and popover scripts. The listeners attempted to create new instances of tooltips and popovers for elements matching the selector, without checking if the instances were already bound to the elements.
In dmxBootstrap5Popovers.js:
document.addEventListener('DOMContentLoaded', function(event) {
return new bootstrap.Popover(document.body, {
selector: '[popover-title]:not([data-bs-trigger]), [data-bs-content]:not([data-bs-trigger])',
placement: function(node) {
var pexpression = node.getAttribute('dmx-bs-placement') || '';
return dmx.parse(pexpression) || node.getAttribute('data-bs-placement') || 'auto';
},
title: function() {
return this.getAttribute('popover-title') || this.getAttribute('title') || '';
},
content: function() {
var expression = this.getAttribute('dmx-bs-popover') || '';
return dmx.parse(expression) || this.getAttribute('data-bs-content') || '';
}
});
});
And in dmxBootstrap5Tooltips.js:
document.addEventListener('DOMContentLoaded', function(event) {
new bootstrap.Tooltip(document.body, {
selector: '[tooltip-title]:not([data-bs-trigger])',
trigger: 'hover',
placement: function(tip, elm) {
var pexpression = elm.getAttribute('dmx-bs-placement') || '';
return dmx.parse(pexpression) || elm.getAttribute('data-bs-placement') || 'auto';
},
title: function() {
var expression = this.getAttribute('dmx-bs-tooltip') || '';
return dmx.parse(expression) || this.getAttribute('tooltip-title') || this.getAttribute('title') || '';
}
});
});
Solution:
To fix the issue, I modified the DOMContentLoaded event listeners in both scripts to loop through the elements matching the selector and check if an instance of a tooltip or a popover was already bound to them before creating new instances.
Here are the updated sections of the scripts with the fixes:
dmxBootstrap5Tooltips.js:
document.addEventListener('DOMContentLoaded', function(event) {
document.querySelectorAll('[tooltip-title]:not([data-bs-trigger]):not([popover-title]):not([data-bs-content])').forEach(function(elm) {
if (!bootstrap.Tooltip.getInstance(elm)) {
new bootstrap.Tooltip(elm, {
trigger: 'hover',
placement: function(tip) {
var pexpression = elm.getAttribute('dmx-bs-placement') || '';
return dmx.parse(pexpression) || elm.getAttribute('data-bs-placement') || 'auto';
},
title: function() {
var expression = elm.getAttribute('dmx-bs-tooltip') || '';
return dmx.parse(expression) || elm.getAttribute('tooltip-title') || elm.getAttribute('title') || '';
},
});
}
});
});
dmxBootstrap5Popovers.js:
document.addEventListener('DOMContentLoaded', function(event) {
document.querySelectorAll('[popover-title]:not([data-bs-trigger]):not([tooltip-title]), [data-bs-content]:not([data-bs-trigger]):not([tooltip-title])').forEach(function(elm) {
if (!bootstrap.Popover.getInstance(elm)) {
new bootstrap.Popover(elm, {
placement: function() {
var pexpression = elm.getAttribute('dmx-bs-placement') || '';
return dmx.parse(pexpression) || elm.getAttribute('data-bs-placement') || 'auto';
},
title: function() {
return elm.getAttribute('popover-title') || elm.getAttribute('title') || '';
},
content: function() {
var expression = elm.getAttribute('dmx-bs-popover') || '';
return dmx.parse(expression) || elm.getAttribute('data-bs-content') || '';
},
});
}
});
});
With these changes, the error no longer occurs, and the tooltips and popovers work as intended.