Overlays: Hide tooltips on show/hide

[fcorneli]

Describe the bug

When a tooltip (on a button) is shown, and you open a modal dialog (via this button), the tooltip remains indefinitely visible.
Especially within a table, you could end up with "dead" tooltips all over the place.
The monkey patch:
https://github.com/e-Contract/enterprise-jsf/blob/master/ejsf-taglib/src/main/resources/META-INF/resources/ejsf/monkey-patch.js
fixes this issue by hiding all tooltips when dialogs open/close.
Demonstrator is available at:
https://demo.e-contract.be/ejsf-demo/monkey-patch.xhtml

Maybe this behavior could be included within Dialog and ConfirmDialog per default?

Reproducer

No response

Expected behavior

No response

PrimeFaces edition

None

PrimeFaces version

12.0.0

Theme

No response

JSF implementation

Mojarra

JSF version

2.3

Java version

1.8

Browser(s)

No response

[melloware]

What happens if on your p:tooltip hideEvent="blur mouseout" ???

[fcorneli]

Using hideEvent="blur mouseout" kind of randomly hides the tooltip, even when you're still hovering over its corresponding button (using Chrome). Within Safari the tooltip doesn't even show anymore. Within Firefox, tooltips on buttons within Dialogs also don't show up anymore.

[melloware]

Got it. OK let me submit a PR.

[melloware]

@fcorneli can you code review my changes and make sure they are in line with what you thought and maybe even try my branch? I added it to all overlays.

[fcorneli]

OK, will have a look at it.

[fcorneli]

@melloware Verified your code (branch PR9941) against the ejsf-demo monkey patch test case, without active monkey patch of course. Behaves as expected. Had a look at your code. Nothing to remark here. Very clean, as always.

[melloware]

Thanks for testing!

[fcorneli]

Any time. Thanks for patching this so fast. When 13 is out, I can shake my monkey out of his tree.

[melloware]

@fcorneli I created a reproducer and mine behaves correctly in PF12.0.0
pf-9941.zip

I noticed in your code you are doing an AJAX call and opening the dialog which makes it different. Mert is proposing this MonkeyPatch instead. Can you test this code in your reproducer?

(function() {
    var ev = new $.Event('remove'),
        orig = $.fn.remove;
    $.fn.remove = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();            
    
PrimeFaces.widget.Tooltip = PrimeFaces.widget.Tooltip.extend({

    bindTarget: function() {
        this._super();
        if (!this.cfg.delegate) {
            var $this = this;
            this.target.off('remove.tooltip').on('remove.tooltip', function() {
                $this.hide();
            });        
        }
    }
});

I want to see if that fixes it better than my current proposed fix.

[fcorneli]

@melloware I tried the above MonkeyPatch. Works as expected. Also without AJAX call, i.e.,

<p:commandButton icon="pi pi-trash" onclick="PF('exampleDialog').show(); return false;"/>
<p:tooltip for="@previous" value="A tooltip that has to disappear when you open the modal dialog."/>

it works as expected.