Element tooltip when label is too long

[brianjhanson]

Adds two new web components, craft-element-label and craft-tooltip.

craft-element-label now wraps all element labels and will calculate if the label overflows its container or not. When it does, a craft-tooltip will be rendered within the .label-link using the innerText of the element and shown when the user hovers or focuses on the .label-link. This means component requires a .label-link to be placed inside it to work, which looks to be true in all our cases.

Example

<craft-element-label id="fields-chip-254024148-label" class="label">
  <a
    class="label-link"
    href="..."
  >
    <span>The Course of Empire (The Arcadian or Pastoral State)</span>
  </a>
</craft-element-label>

craft-tooltip is a more generic component that can eventually be used for any tooltips. It basically wraps Floating UI to handle positioning and rendering an arrow with some intelligence.

Example

<button type="button">
  Button Text
  <craft-tooltip>This will show when you hover or focus the button element.</craft-tooltip>
</button>

These are both light DOM components, so styling is handled by regular 'ol CSS.

CleanShot.2024-02-29.at.13.15.54-converted.mp4

[brianjhanson]

@gcamacho079 can you take this for a spin before I un-draft it?

[gcamacho079]

This is awesome! What I was specifically looking for was:

• ESC to close
• Being able to move the pointer over the tooltip without causing it to disappear as a result
• Functionality that can be triggered by mouse hover can also be triggered by keyboard

I also tested this with the Zoom accessibility feature on Mac, and it’s working great! 👍🏼

A couple things:

• I did notice that the title element is still showing alongside the tooltip, are we able to pull that off in this PR?
• Is it possible to easily implement this for Draft chips in the Recent Drafts widget on the dashboard?

[brianjhanson]

@gcamacho079 just pushed some changes to address those issues:

• Now works for widgets
• No more title attributes
• Fixed some over zealous hovers

[gcamacho079]

@brianjhanson thank you! Just pulled this down again; when I tested this time I seem to be causing the tooltip to close on hover, depending on how quickly/slowly I move my mouse.

[brandonkelly]

@brianjhanson Maybe worth addressing #14514 with this as well?

[brianjhanson]

@gcamacho079 I think I've resolved the hover issue. Due to the way the markup was, there was a tiny bit of space between the trigger and target. I refactored things a bit so that space is taken up with padding instead of margin, which should maintain the hover state.

@brandonkelly I updated table columns to have a max-width of 40vw to address #14514. Let me know if you think that fix is too heavy handed.

[gcamacho079]

@brianjhanson fantastic! The hover experience is excellent.