Clarity: Allow for tooltips to be used inside button group Angular component

[ChrisKaun]

Describe the bug

When trying to use a tooltip inside a ClarityButton it won't be displayed in Firefox (61.0.2).
In Chrome (68.0.3440.106) the tooltip appears. Couldn't test the stackblitz posted below in Edge (42.17134.1.0) because it didn't load but in our application the tooltips are working with that markup.

How to reproduce

https://stackblitz.com/edit/clarity-light-theme-v012-kiyg7a

Expected behavior

Don't know if that it is supported by clarity to use tooltips inside a button.
Either way the tooltip shouldn't be displayed in Chrome/Edge or it should appear in Firefox so that the browser handle this equaly.

Versions

App

• Angular: 5.2.10
• Node: 9.11.2
• Clarity: 0.11.1

[mathisscott]

Hi @ChrisKaun

Once this pull request goes in tooltips should work fine in Firefox when using the static HTML/CSS button group.

I've pasted a working example with the code we needed to add to allow for tooltips inside static button groups on stackblitz.

Fixing this for the angular component will be more involved. Because it's Firefox and using tooltips in button groups is an edge case, it will not be high in priority. But I will change this issue to reflect the angular piece that is still ahead of us.

[collins1830207]

Hi @mathisscott,

I need to use clr-button-group, how to add tooltip to the buttons in it?
Here is the code: https://stackblitz.com/edit/clarity-light-theme-v012-xnfx6n
Thanks in advance!

[gnomeontherun]

There is a workaround available for this issue, and we recommend using it for Clarity Angular. As we build Clarity Core implementations, we expect that this issue won’t be an issue or will be configurable on the application side. To help us clean up our backlog, we are going to close this with a functional workaround available and suggest you follow updates for Clarity Core for enhancements that can support your use case with Clarity Core components.