Tooltip
A Tooltip is a small overlay that opens on user interaction, providing contextual information or options without navigating away from the current page.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Import the component
import Tooltip from '@start-base/start-ui/Tooltip';Usages
Popover With Left Placement
Popover With Left Start Placement
Tooltip With Left End Placement
Tooltip With Right Placement
Tooltip With Right Start Placement
Tooltip With Right End Placement
Tooltip With Top Placement
Tooltip With Top Start Placement
Tooltip With Top End Placement
Tooltip With Bottom Placement
Tooltip With Bottom Start Placement
Tooltip With Bottom End Placement
API
| Name | Type | Default | Variants | Description |
|---|---|---|---|---|
| text | string | Text of the Tooltip | ||
| placement | string | bottom | top bottom left right top-start top-end bottom-start bottom-end left-start left-end right-start right-end | Placement of the Tooltip |
| children | node | Content of the Tooltip |