Documentation

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Examples

import { Tooltip } from 'kalki-design'

<Tooltip>Click me</Tooltip>

Installation

npx kalki-design add tooltip

Usage

import { Tooltip } from 'kalki-design'

export default function Example() {
  return <Tooltip />
}

API Reference

NameTypeDefaultDescription
NamecontentTypeReactNodeDefaultDescriptionThe content to display inside the tooltip.
NamesideType'top' | 'right' | 'bottom' | 'left'Default'top'DescriptionThe preferred side of the trigger to render against when open.
NamealignType'start' | 'center' | 'end'Default'center'DescriptionThe preferred alignment against the trigger.
NamedelayTypenumberDefault300DescriptionDuration in milliseconds before the tooltip appears.