Tooltip

A tooltip is a contextual text bubble that displays a description for an element that appears on pointer hover or keyboard focus.

#Usage

import { Tooltip } from '@kinsta/stratus'

const MyComponent = () => (
  <Tooltip content="Press ⌘ + P to print">
    <div>Print</div>
  </Tooltip>
)
Copy

Some components don't need to wrap them into Tooltip. More often than not you need a tooltip for an IconButton, so it's a built-in feature for that component. This is also true for buttons, and links as well.

#Props

We use the awesome Floating UI to position the tooltip. You don't need to care about positioning, because we use the flip and shift middlewares, so the tooltip always stays in viewport.

So the placement prop won't necessarily take effect, only if the tooltip has the available space.

#Types

• Placement: strings that identify the placement of the tooltip
• TooltipProps: props of the Tooltip component processed by stratus

Read more about types here

#See Also

• Popover