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

Appearance

The tooltip surface is always dark, including nested content, regardless of whether the app is in light or dark mode. Color and contrast variants from the current theme are preserved.

The drop shadow uses the lighter elevation (--cn-shadow-1) so it does not pick up the dark-mode 60% black halo when the tooltip is forced dark over a light page.

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