Tooltips / Popper support #46
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…used Bootstrap Icons from cards example wip: porting popper to current yew-bootstrap wip: moving things back to the way they were Tooltips: rework docs, add examples Re-export Placement to avoid requiring a direct dependency on popper-rs Add support for tooltips to form controls Add tooltip support to Link Mark tooltips as supported fix Tooltip doctest fix tooltip formatting Make buttons with tooltips different colours, reformat some examples Allow using media queries to selectively enable Tooltip-on-focus support. Ignore synthetic hover events (iOS). Document browser nonsense
…oesnt work on <a>
isosphere
requested changes
Feb 1, 2025
Comment on lines
+445
to
+446
| TooltipFocusTrigger::IfNoHover, | ||
| TooltipFocusTrigger::IfNoAnyHover, |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Based on
#45#48This adds support for tooltips with
popper-rs.Bootstrap tooltips are built with Popper. Both Yew and Popper assume they have complete control of the DOM, so Popper needs some extra wiring to handle the component lifecycle correctly, which
popper-rsprovides.This takes some ideas from
react-bootstrap's Tooltip implementation, but goes for a slightly simpler model, where Tooltips are dropped into a portal directly (likepopper-rs' example), and the Tooltip component is responsible for all the event handling (rather thanOverlayandOverlayTrigger).To position the tooltip correctly and mark the target element with accessibility attributes, you need to expose a
NodeReffor each component you want to add a tooltip to. I've exposedNodeRefs forButton,FormControlandLink.One of the complexities with this is deciding when to trigger the tooltip, which is a problem both
react-bootstrapand Bootstrap never really solved. By default, this will trigger on focus and on pointer hover. I've added options for selectively disabling triggering on focus, but deficiencies in the Media Queries spec and browser implementations make none of them great options. There are a lot of caveats listed in the docs.Unlike regular Bootstrap, this doesn't support tooltips from
dataattributes.I've added examples using all of those controls, and also a direct
ref=attribute on a HTML elements.