Tooltip

Clue in your users with our Tooltip. It's like a tiny whisper, telling you exactly what's what

Example

1  import { Tooltip, Button, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox justify='center'>
4    <Tooltip id="info" content="This is a helpful tooltip message!">
5      <Button>Hover me</Button>
6    </Tooltip>
7  </FlexBox>
8

API Reference

It builds on top of Radix-UI Tooltip

Component	Description
Tooltip	Ready to spill the secrets? Tooltips are small, informative messages that appear when a user hovers or focuses on an element. They offer contextual help or provide extra information about the element without cluttering your UI. Wrap them around Tooltip.Provider to make sure they're ready to whisper their secrets at the right moment!
Tooltip.Provider	The stage director for your Tooltips. All Tooltip components should be wrapped with a Tooltip.Provider to ensure they work properly. It doesn't require any props, just make sure your Tooltips are within its embrace!

Popover

Prop	Type	Default	Explanation
`align`	`string`	center	Dictates the alignment of the Tooltip with respect to the target element. Choose between 'start', 'center', and 'end' to position your Tooltip just right.
`delayDuration`	`number`	0	This controls the delay (in milliseconds) before the Tooltip appears once the user interacts with the element.
`arrow`	`boolean`	true	This prop determines whether your Tooltip brings an arrow with it. True shows the arrow, pointing out the target element, false hides it.
`portal`	`boolean`	false	When set to true, the Tooltip content will be rendered into a portal, keeping the Tooltip on top of other elements and preventing clipping issues.
`side`	`string`	bottom	Controls which side of the target element the Tooltip will appear on. You can choose from 'top', 'bottom', 'left', 'right'.
`open`	`boolean`		A state-controlled prop that dictates whether the Tooltip is currently visible. Use it with a state hook to programmatically control your Tooltip's behavior.
`defaultOpen`	`boolean`		Use this prop when you don't want to control the Tooltip's visibility via state. It sets the default visibility of the Tooltip.
`onOpenChange`	`function`		A function that gets called whenever the visibility of the Tooltip changes. Perfect for keeping track of what your Tooltips are up to!
`color`	`string`	light	Sets the background color of your Tooltip. Choose between 'light' and 'dark' to match your theme or ensure good contrast.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius