I'm using jQuery-QueryBuilder (v3 via CDN) along with the current Bootstrap 5. If I enable the built in tooltip plugin the the tooltip only displays as [Object.object] rather than the expected error text (e.g No filter selected)
plugins: {
'bt-tooltip-errors': { delay: 100 }
}
If I disable the plugin the the default browser tool tip will show as expected with the correct error text. Though it's in the default browser style and not the bootstrap style.
Looking through git I see PR1008 which looks like it resolves the issue but it's not yet in a published version.
I am looking for a way to get the bootstrap tooltip to display correctly without using a dev build.
Hopefully to save others looking around I found a working solution which avoids using the bt-tooltip-errors plugin.
In your .js file enable the bootstrap tool tip as normal;
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
Then wherever you have your function that submits the query when you click the button;
$('#btn-get-sql').on('click', function() { ... }) Add the following;
var elem = $('div.error-container');
elem.attr('data-bs-original-title', elem.attr('title')).tooltip();
Now when you have a querybuilder error the tooltip will show up in the correct style. If there is a better way to do this please let me know.