Skip to main content

Overlays

Tooltip

Popover-anchored tooltip with role="tooltip" and four positions.

Element
<span>
Module
@basenative/components
Function
renderTooltip

Quick start

Import the render function and call it from your server template.

import { renderTooltip } from '@basenative/components';

renderTooltip({ trigger: 'Help', content: 'Helpful context', position: 'top' });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Click or press Enter for context

role="tooltip" anchored to its trigger via the Popover API. The trigger is a popover invoker, so it opens on activation — click, or Enter / Space with focus — not on hover.

Live render
This is a tooltip with helpful context.
Source
renderTooltip({ trigger, content, position: 'top' })

Options

Arguments accepted by renderTooltip().

renderTooltip option reference
Option Type Default Description
trigger string — Trigger HTML or text.
content string — Tooltip body.
position 'top' | 'right' | 'bottom' | 'left' 'top' Anchor side.