Skip to content

Update tooltip to work on disabled elements#14561

Merged
i-just merged 1 commit intofeature/cms-1091-ability-to-move-entries-to-a-new-sectionfrom
feature/tooltip-on-diabled-elements
Mar 11, 2024
Merged

Update tooltip to work on disabled elements#14561
i-just merged 1 commit intofeature/cms-1091-ability-to-move-entries-to-a-new-sectionfrom
feature/tooltip-on-diabled-elements

Conversation

@brianjhanson
Copy link
Copy Markdown
Contributor

Updates the craft-tooltip to work for disabled elements. To pull this off, we changed the API just a bit. The biggest change is that the tooltip now grabs the text for the tooltip from aria-label rather than from the innerText.

To use the tooltip with disabled elements, you can wrap the element with the <craft-tooltip. The previous behavior is still available if you add a self-managed property to the tooltip.

When craft-tooltip is used as a wrapper, it will look for an a, button or [role="button"] and use that as the trigger for the tooltip.

<craft-tooltip aria-label="Text for the tooltip">
  <button type="button" disabled>Some Action</button>
</craft-tooltip>

This brings our tooltip more in line with spectrum's API and GitHub Primer.

@brianjhanson brianjhanson requested a review from i-just March 9, 2024 22:20
@i-just
Copy link
Copy Markdown
Contributor

i-just commented Mar 11, 2024

Thanks, Brian!
It works like I’d expect it to, except the disabled attribute shouldn’t be added because it prevents the element from being tabbable. Removing 'disabled' => $disabled (from here) makes it possible to tab into the "Apply draft" button and see the tooltip, but you still can’t activate it, which is exactly what I was after :)

@i-just i-just merged commit 78f2e7a into feature/cms-1091-ability-to-move-entries-to-a-new-section Mar 11, 2024
@i-just i-just deleted the feature/tooltip-on-diabled-elements branch March 11, 2024 09:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants