Bug: calcite-tooltip not working on disabled calcite-tile

[AdelheidF]

I want to display a tooltip for a disabled tile to tell the user why this option is not available. But the tooltip doesn't show if a tile is disabled.

Actual Behavior

no tooltip shows

Expected Behavior

tooltip should show

Reproduction Steps and Sample

https://codepen.io/afreitag/pen/VwWoGVV?editors=1000

Relevant Info

Version: @esri/[email protected]

• CDN
• NPM package

[driskull]

Looks like this is an issue with calcite-tile. It shouldn't be setting pointer-events: none on the host because then any hovering won't work. Instead, it should set the pointer-events none on a container within the host.

Does that make sense @jcfranco ?

[jcfranco]

TL;DR: calcite-tile's only interactive portion is the internal link, so removing the host pointer-events could suffice.

Went on a bit of a rabbit hole. 😅

1. It looks like disabled is only applicable when the href property is set as it makes the tile interactive
2. Supporting disabled when non-interactive (w/o href) seems to contradict Epic: consistent disabled prop behavior #2655 (comment), but there wasn't an example of 'partial-disabled' behavior during that time.
3. In the provided sample, assuming pointer-events:none was set on the internal container, there would still be an issue for keyboard users as the tile w/o href is not tabbable
4. This isn't really applicable to calcite-tile as it's not a form control, but the spec advises for disabled form controls to prevent click events. There's no details on other events and there's even a thread about this: Mouse events & disabled form controls whatwg/html#2368 I think we could follow this pattern for interactive components too.

@Esri/calcite-design-representatives WDYT about ☝🏼 ?

cc @benelan

[AdelheidF]

Here is a related issue to allow focus on a tile: #2141

Design:

[macandcheese]

@jcfranco above sounds good in combination with #2141

[driskull]

@AdelheidF as a workaround for now, can you add the tooltip to a div that is wrapping the disabled tile?

[AdelheidF]

Workaround idea works, I'm fine with this.