Clay: ClayTooltipProvider doesn't work with nested elements

[thektan]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Is there an example you can provide via codesandbox.com?

https://codesandbox.io/embed/clay-tooltip-with-icon-6pdzo

What are the steps to reproduce?

ClayTooltipProvider seems to only work if you're wrapping a single-level element like <span title="tooltip">test</span>.

What is the expected result?

I'd expect the tooltip to appear even if there are more nested elements like

<div title="tooltip">
  <span>test</span>
</div>

My main use case is adding a tooltip to an icon.

Environment

| Tech | Version |
| ----- | ------- |
| Clay | v3.0.1 |
| React | 16.9.0 |

[thektan]

Actually ~this works~ (See https://github.com/liferay/clay/issues/2640#issuecomment-542929919) (which is my current use case for it):

<ClayTooltipProvider>
    <ClayIcon
        spritemap={spritemap}
        symbol="question-circle-full"
        title="Tooltip Content"
    />
</ClayTooltipProvider>

~No use case to fix this bug yet, but I still believe it's a bug if you want a tooltip around a compound element. I guess a current workout would be extracting it into a separate component?~ (Still doesn't work as expected, see below comment. https://github.com/liferay/clay/issues/2640#issuecomment-542929919)

[thektan]

Well this is strange...I can't seem to get spritemaps to load in the codesandbox, but here's the behavior I'm seeing with using <ClayTooltipProvider><ClayIcon></ClayTooltipProvider>.

[matuzalemsteles]

Hmm, thanks @thektan. This has to do with the internal use of onMouseOut andonMouseOver since we use it to show and hidden Tooltip over the active element, so it tracks any nested element.

@bryceosterhaus we can use an approach to cover these cases, one strategy would be to add pointer-events: none over the child elements of the title element, that would be a little difficult to do or we might suggest putting them.

[bryceosterhaus]

@matuzalemsteles I think the pointer-events: none is particularly used for svg elements. I remember running into that with Loop and Faro as well. As far as the nested elements though, we probably should think of a way to resolve that issue since it seems like a necessary feature. I can take a look at it next week.

[bryceosterhaus]

Or probably tomorrow actually. I thought today was Friday lol

[thektan]

Thanks! I'll add the following css for now which fixes it (I'll scope to the icon itself):

svg * {
    pointer-events: none;
}