Tooltip

Tooltip with heading, body and close — 6 tail positions controlling where the pointer attaches.

Playground

Position

Title

Description

Closable

URL

https://design-system-ashu.vercel.app/iframe.html?id=components-tooltip--playground&viewMode=story&args=position%3Atop-left%3Btitle%3ANew+App+version+available%3Bdescription%3AUpdate+your+app+now+to+experience+latest+features+on+the+app%3Bclosable%3A%21true

Code

<Tooltip
  position="top-left"
  title="New App version available"
  description="Update your app now to experience latest features on the app"
  closable
/>

Props

Name	Type	Default
`position`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'left' \| 'right'`	`'top-left'`
`title`	`string`	`'New App version available'`
`description`	`string`	`'Update your app now to experience latest features on the app'`
`closable`	`boolean`	`true`

Usage guidelines

When to use

Use to reveal supplemental info for icon-only buttons, truncated labels, or complex field labels.
Position the tail to point clearly at the trigger element without obscuring nearby content.
Show a close button when the tooltip contains important info the user may want to re-read.

When not to use

Don't put critical information in a tooltip — it must be discoverable without interaction.
Avoid tooltips on mobile where hover doesn't exist; use inline helper text instead.
Don't use for long-form content; tooltips are for brief supplemental labels only.