Tooltip

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeTooltipExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeTooltipExample/></NativeScope>}

Positions

A tooltip can sit on any side of its trigger - set the placement prop on Tooltip to top (default), bottom, left or right. The caret and the blur-in transform rotate to match, and React Aria automatically flips to the opposite side if there isn't room on-screen. Hover the buttons below.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="tooltip" id="positions"/>}

Sizes

The tooltip comes in 2 sizes: sm (12px Caption 1, the default - used by the Contributions heatmap) and md (14px Body 1, with roomier padding). Switch by changing the size prop on the Tooltip - compare the Small and Medium triggers in the preview above.

'use client';
import '@helios-ui/react/styles.css';
import {NativeScope,NativeTooltipExample} from '@helios-ui/react';
export function Example(){

return <NativeScope><NativeTooltipExample/></NativeScope>;
}