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.

Vertical Scroll

Content scrolls when it exceeds the max height.

Horizontal Scroll

Content scrolls when it exceeds the max width.

Both Horizontal and Vertical Scroll

Content scrolls when it exceeds the max height and max width.

Footer

Use the footer prop for content that stays fixed at the bottom when the body scrolls.

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
footer	false		ReactNode
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