Tooltip

The Tooltip component provides additional information for an element in a small overlay.

Usage

import { Tooltip, TooltipProvider } from '@harnessio/ui/components'

// ...

return (
  <TooltipProvider> {/* typically wrapped around the entire app */}
    {/* ... */}
    <Tooltip
        title="Title"
        content={<p>This is a tooltip</p>}
    >
      <span>Hover me</span>
    </Tooltip>
  </TooltipProvider>
)

Tooltip with no arrow

Sides

The Tooltip component can be displayed to any side of the trigger element. If there isn’t any room to display the tooltip on the preferred side, the tooltip will instead be displayed on the opposite side. Using the side prop, the Tooltip component supports top, bottom, left and right sides.

Alignment

The Tooltip component can be aligned relative to the anchor or trigger element using the align prop. It supports start, center, and end values. This controls how the tooltip is positioned along the side it appears on.

API Reference

TooltipProvider

The provider component that manages tooltips. Typically wrapped around the entire app.

Prop	Required	Default	Type
children	true		ReactNode

Tooltip

Prop	Required	Default	Type
content	true		ReactNode
title	false	undefined	string
side	false	top	'right' | 'left' | 'top' | 'bottom'
align	false	center	'start' | 'center' | 'end'
hideArrow	false	false	boolean
delay	false	500	number
children	true		ReactNode