Tooltip error

UI Components for Angular
Post Reply
mmikeyy
Posts: 126
Joined: 11 May 2016, 17:39

02 Aug 2016, 04:46

The problem occurs when an element with a tooltip component attached includes more than one html element.

*edit: here is an example of html triggering a tooltip error, just to show that I'm not writing about anything exotic. Moving the cursor from the icon to the text to the right of it is all it takes to trigger an error.

Code: Select all

<a pTooltip="tooltip text">
  <i class="fa fa-check"></i> 
  Submit
</a>
When the cursor moves from one inner element to the next, the following error occurs:

TypeError: Cannot read property 'style' of null
at Tooltip.hide (tooltip.ts:89)
at Tooltip.onMouseLeave (tooltip.ts:32)

The reason is that 2 mouseleave events are generated each time the cursor moves from one inner element to the next. The first event is for leaving the inner element that the cursor exits, and the next mouseleave event is for leaving the outer element (to which tooltip is attached) as entering another inner element is apparently considered exiting the outer element- even though this is not happening.

I don't know if all browsers behave this way, but Chrome does.

The tooltip is destroyed when the first inner element is exited (even though we're still within the outer one). The program attempts to destroy it again when the second inner element is entered. But it no longer exists, whence the error.

I first changed the source as follows:

Code: Select all

    Tooltip.prototype.hide = function () {
        if (!this.container){                            // lines added begin
            return                                           //
        }                                                      // lines added end
        this.container.style.display = 'none';
        document.body.removeChild(this.container);
        this.container = null;
    };

The 3 lines I added make the error go away. However the tooltip remains problematic. It disappears as soon as the cursor moves from one inner element to the next, without ever leaving the outer element.

A better solution is as follows:

Code: Select all

    Tooltip.prototype.onMouseLeave = function (e) {
        if (this.tooltipEvent !== 'hover') {
            return;
        }
        let node = e.relatedTarget;
        do {
            if (node.isSameNode(this.el.nativeElement)){
                return;
            }
            node = node.parentNode;
        } while (node);
        this.hide();
    }
With this code, the cursor can move from one inner element to the other, and the mouseleave events generated will be ignored because they hit this.el when bubbling from the relatedTarget.

You'll possibly find a better solution, but for me this works.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 10 guests