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


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

API Reference

It builds on top of Radix-UI 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!


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!

alignstringcenterDictates the alignment of the Tooltip with respect to the target element. Choose between 'start', 'center', and 'end' to position your Tooltip just right.
delayDurationnumber0This controls the delay (in milliseconds) before the Tooltip appears once the user interacts with the element.
arrowbooleantrueThis prop determines whether your Tooltip brings an arrow with it. True shows the arrow, pointing out the target element, false hides it.
portalbooleanfalseWhen set to true, the Tooltip content will be rendered into a portal, keeping the Tooltip on top of other elements and preventing clipping issues.
sidestringbottomControls which side of the target element the Tooltip will appear on. You can choose from 'top', 'bottom', 'left', 'right'.

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.


Use this prop when you don't want to control the Tooltip's visibility via state. It sets the default visibility of the Tooltip.


A function that gets called whenever the visibility of the Tooltip changes. Perfect for keeping track of what your Tooltips are up to!


Sets the background color of your Tooltip. Choose between 'light' and 'dark' to match your theme or ensure good contrast.