Tooltip sticking

For what reason, on one page, the tooltip works fine, disappearing after the cursor leaves the button:
tooltip1

And on another page, exactly the same navigation with absolutely the same settings, does not work correctly, with the tooltip sticking:
tooltip2

What can create such a difference and such behavior?

After a long analysis, I found the reason for the correct and incorrect operation of the tooltip on the pages.

In the first case (when the tooltip works correctly), clicking on the tab caused the server action, which in turn, if successful, triggered the smooth scroll component. Smooth scrolling resets the focus from the tab element, thereby preventing the tooltip from sticking.

Everywhere the tooltip sticks, there was a situation where the element came into focus due to clicking on it.

So the best solution I found to prevent the tooltip from sticking is to call an event when clicked, which would move the focus to another element.

There is also a simple solution suggested by @Teodor :


But it has a small drawback. This event does not remove the focus from the element, but only hides the tooltip. So if you go to another tab and then come back, the tooltip will appear again:

It would be great if in the future the component of the tooltip will be improved, so that you do not have to fasten additional events to the elements, and the focus would be removed automatically by the component itself.

1 Like

I too looked into this and I believe it largely stems from the default trigger for BS5 tootltips being ‘hover focus’ and the focus not being removed before changing view. If that means the element that triggers the tooltip is no longer visible, you can’t get rid of it.

Looking at the dmxBootstrap5Tooltips.js file, it seems that there is no provision for changing the trigger behaviour when altering the option in the UI. Also when selecting ‘hover’ it simply removes the dmx-bs-trigger attribute rather than explicitly setting it to hover so you end up with the default ‘hover focus’ value.

I think this element of the BS5 implementation can probably be improved (once focus shifts away from W4.0 Electron implementation), but in the meantime I altered the file’s mounted event to and it seems to work well. I do need to manually add dmx-bs-trigger="hover focus" if I want the element to use that value otherwise it defaults to ‘hover’ and reacts to whatever is selected in the UI :

dmx.Attribute('bs-tooltip', 'mounted', function (node, attr) {
  var texpression = node.getAttribute('dmx-bs-trigger') || '';
  var dmxtrigger = dmx.parse(texpression) || node.getAttribute('data-bs-trigger') || 'hover';
  this.$addBinding(attr.value, function (value) {
    new bootstrap.Tooltip(node, {
      placement: function (node) {
        var pexpression = node.getAttribute('dmx-bs-placement') || '';
        return dmx.parse(pexpression) || this._element.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') || '';
      },
      trigger: dmxtrigger
    });

    node.setAttribute('tooltip-title', value || '');
  });
});

I hope it helps.
(No guarantees offered, and these changes will likely be overwritten with updates)

This has been fixed in Wappler 4.0.5

This topic was automatically closed after 32 hours. New replies are no longer allowed.