Skip to content

Element tooltip when label is too long#14502

Merged
brandonkelly merged 17 commits into5.0from
feature/cms-14462-full-filenames
Mar 5, 2024
Merged

Element tooltip when label is too long#14502
brandonkelly merged 17 commits into5.0from
feature/cms-14462-full-filenames

Conversation

@brianjhanson
Copy link
Copy Markdown
Contributor

@brianjhanson brianjhanson commented Feb 29, 2024

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 brianjhanson marked this pull request as draft February 29, 2024 19:24
@brianjhanson
Copy link
Copy Markdown
Contributor Author

brianjhanson commented Feb 29, 2024

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

@gcamacho079
Copy link
Copy Markdown
Contributor

gcamacho079 commented Feb 29, 2024 •
edited
Loading

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 brianjhanson changed the title Element tooltip when label is Element tooltip when label is too long Feb 29, 2024
@brianjhanson
Copy link
Copy Markdown
Contributor Author

brianjhanson commented Feb 29, 2024

@gcamacho079 just pushed some changes to address those issues:

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

@gcamacho079
Copy link
Copy Markdown
Contributor

gcamacho079 commented Mar 1, 2024

@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
Copy link
Copy Markdown
Member

brandonkelly commented Mar 1, 2024

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

@brianjhanson brianjhanson force-pushed the feature/cms-14462-full-filenames branch from b3310f2 to 6958061 Compare March 1, 2024 22:47
@brianjhanson brianjhanson force-pushed the feature/cms-14462-full-filenames branch from 6958061 to cf1123e Compare March 1, 2024 23:06
@brianjhanson
Copy link
Copy Markdown
Contributor Author

brianjhanson commented Mar 1, 2024

@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.

@brianjhanson brianjhanson mentioned this pull request Mar 4, 2024
Closed
@gcamacho079
Copy link
Copy Markdown
Contributor

gcamacho079 commented Mar 4, 2024

@brianjhanson fantastic! The hover experience is excellent.

@brianjhanson brianjhanson marked this pull request as ready for review March 4, 2024 16:12
@brandonkelly
Release notes
cdf5e6d 
[ci skip]
@brandonkelly brandonkelly merged commit 4dd6675 into 5.0 Mar 5, 2024
@brandonkelly brandonkelly deleted the feature/cms-14462-full-filenames branch March 5, 2024 01:14
brandonkelly added a commit that referenced this pull request Mar 5, 2024
@brandonkelly
#14502 fixed #14517
3d3a4a4 
[ci skip]
@brandonkelly brandonkelly mentioned this pull request Mar 5, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@brandonkelly brandonkelly Awaiting requested review from brandonkelly

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@brianjhanson @gcamacho079 @brandonkelly