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>
)

withTooltip HOC

HOC for adding Tooltip support to any component. For the HOC to work correctly, the component must use forwardRef.

import { withTooltip } from "@harnessio/ui/components";

// ...

const comp = withTooltip(yourComp);

Themes

The tooltip supports default and themed themes. The default theme provides high-contrast appearance with fixed colors and is used by default. The themed theme follows the current theme’s color palette.

Hide Arrow

Use hideArrow prop to remove the tooltip arrow.

Sides

The tooltip can be positioned on any side: top (default), bottom, left, or right.

Alignment

Control tooltip alignment relative to the trigger using align prop: start, center (default), or end.

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
children	true		ReactNode
content	true		ReactNode
title	false		string
theme	false	'default'	'default' | 'themed'
side	false	'top'	'top' | 'bottom' | 'left' | 'right'
align	false	'center'	'start' | 'center' | 'end'
hideArrow	false	false	boolean
sideOffset	false	2 (6 when hideArrow is true)	number
delay	false	500	number
open	false		boolean
className	false		string