plugin.js

/**
 * @class BtTooltipErrors
 * @memberof module:plugins
 * @description Applies Bootstrap Tooltips on validation error messages.
 * @param {object} [options]
 * @param {string} [options.placement='right']
 * @throws MissingLibraryError
 */
QueryBuilder.define('bt-tooltip-errors', function(options) {
    if (! typeof bootstrap.Tooltip === "function") {
        alert(typeof bootstrap.Tooltip );
        Utils.error('MissingLibrary', 'Bootstrap Popper is required to use "bt-tooltip-errors" plugin. Get it here: http://getbootstrap.com');
    }

    var self = this;

    // add BT Tooltip data
    this.on('getRuleTemplate.filter getGroupTemplate.filter', function(h) {
        var $h = $($.parseHTML(h.value));
        $h.find(QueryBuilder.selectors.error_container).attr('data-bs-toggle', 'tooltip');
        h.value = $h.prop('outerHTML');
    });

    // init/refresh tooltip when title changes
    this.model.on('update', function(e, node, field) {
        if (field == 'error' && self.settings.display_errors) {
            var $errorContainer = node.$el.find(QueryBuilder.selectors.error_container).eq(0);

            // Translate the error message (node.error is an array like ['string_empty'])
            var errorMessage = '';
            if (node.error && Array.isArray(node.error) && node.error.length > 0) {
                errorMessage = self.translate('errors', node.error[0]) || node.error[0] || '';
            }

            // Only set tooltip if we have a non-empty error message
            if (errorMessage) {
                $errorContainer.attr('data-bs-original-title', errorMessage).attr('data-bs-title', errorMessage);

                // Initialize Bootstrap 5 tooltip (dispose existing first to avoid conflicts)
                var tooltipEl = $errorContainer.get(0);
                if (tooltipEl) {
                    // Dispose existing tooltip if any
                    var existingTooltip = bootstrap.Tooltip.getInstance(tooltipEl);
                    if (existingTooltip) {
                        existingTooltip.dispose();
                    }

                    // Create new tooltip with explicit title
                    new bootstrap.Tooltip(tooltipEl, {
                        placement: options.placement || 'right',
                        title: errorMessage
                    });
                }
            }
        }
    });
}, {
    placement: 'right'
});