tooltip#96
Open
karamba228 wants to merge 3 commits into
Open
Conversation
8 tasks
smeragoel
requested changes
Jul 1, 2026
smeragoel
left a comment
smeragoel
left a comment
Member
There was a problem hiding this comment.
Thanks @karamba228, looks great!! I've added a few comments in the code, also additionally:
- I'm seeing a drifting issue on zoom that we saw in radio / checkboxes as well (sorry for the low quality gif 😓)
- The arrow uses rounded corners, so even the edges that should sit flush against the tooltip border have a rounded border (blue highlight). Also, the pointer end overlaps with the border of the button (red highlight)
Comment on lines
+97
to
+122
| <div className="grid grid-cols-2 items-center justify-items-center gap-6 sm:grid-cols-4"> | ||
| <Tooltip> | ||
| <TooltipTrigger render={<Button variant="outline" />}> | ||
| Top | ||
| </TooltipTrigger> | ||
| <TooltipContent side="top">Top Tooltip</TooltipContent> | ||
| </Tooltip> | ||
| <Tooltip> | ||
| <TooltipTrigger render={<Button variant="outline" />}> | ||
| Right | ||
| </TooltipTrigger> | ||
| <TooltipContent side="right">Right Tooltip</TooltipContent> | ||
| </Tooltip> | ||
| <Tooltip> | ||
| <TooltipTrigger render={<Button variant="outline" />}> | ||
| Bottom | ||
| </TooltipTrigger> | ||
| <TooltipContent side="bottom">Bottom Tooltip</TooltipContent> | ||
| </Tooltip> | ||
| <Tooltip> | ||
| <TooltipTrigger render={<Button variant="outline" />}> | ||
| Left | ||
| </TooltipTrigger> | ||
| <TooltipContent side="left">Left Tooltip</TooltipContent> | ||
| </Tooltip> | ||
| </div> |
Member
There was a problem hiding this comment.
Nit: I'd rearrange these to show tooltips in the order left - top - bottom - right so that the buttons are not hidden by tooltips of the adjacent button.
Comment on lines
+126
to
+138
| export const Left: Story = { | ||
| name: 'Left hover', | ||
| render: () => ( | ||
| <Tooltip> | ||
| <TooltipTrigger render={<Button variant="outline" />}> | ||
| Hover left | ||
| </TooltipTrigger> | ||
| <TooltipContent side="left"> | ||
| Tooltip content displayed on the left. | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| ), | ||
| }; |
Member
There was a problem hiding this comment.
This is redundant because of the previous story and can be removed.
Comment on lines
+192
to
+201
| export const Disabled: Story = { | ||
| render: () => ( | ||
| <Tooltip disabled> | ||
| <TooltipTrigger render={<Button disabled variant="outline" />}> | ||
| Disabled | ||
| </TooltipTrigger> | ||
| <TooltipContent>This tooltip is disabled.</TooltipContent> | ||
| </Tooltip> | ||
| ), | ||
| }; |
Member
There was a problem hiding this comment.
This is a complicated story, since disabled buttons cannot have tooltips triggered. We can remove it altogether.
| "name": "tooltip", | ||
| "type": "registry:ui", | ||
| "title": "Tooltip", | ||
| "description": "Compact supplemental information shown on hover or keyboard focus, with anchored positioning and optional arrow.", |
Member
There was a problem hiding this comment.
Suggested change
| "description": "Compact supplemental information shown on hover or keyboard focus, with anchored positioning and optional arrow.", | |
| "description": "Compact supplemental information shown on hover or keyboard focus, with anchored positioning and optional arrow. Touch devices don't trigger tooltips so critical information shouldn't live only in a tooltip.", |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Reference Issues or PRs
What does this implement/fix?
Put a
xin the boxes that applyTesting
Documentation
Access-centered content checklist
Text styling
H1or#in markdown).Non-text content
Any other comments?