Overlay

Tooltip

Floating label on hover or focus.

Available inreactangular

Preview

Live previewreal component

Install

TerminalBash

$ npx mcp-elements add tooltip

Usage

tooltip-example.tsxTSX

import { Tooltip } from '@mcp-elements/react'

export function Example() {
  return (
    <Tooltip content="Auto-approve read-only tool calls" side="top">
      <button>Auto-approve</button>
    </Tooltip>
  )
}

Props

Prop	Type	Default	Description
`content *`	`React.ReactNode`	—	Content shown inside the tooltip
`children *`	`React.ReactElement`	—	The trigger element the tooltip is attached to
`side`	`'top' \| 'bottom'`	`'top'`	Which side of the trigger the tooltip appears on
`delay`	`number`	—	Delay in milliseconds before the tooltip opens
`className`	`string`	—	Additional classes merged onto the tooltip content