Overlays component

Tooltip

Show concise accessible contextual help on hover, focus, click, or controlled open state.

17 props2 slots3 outputsTheme readyResponsive

Interactive playground

Configure Tooltip

Change any prop and inspect the server-rendered component immediately.

Live preview

Component code

<Tooltip
  title="Tooltip example"
  description="A polished default tooltip for a modern application.">
  <div data-slot="trigger">
    <div class="showcase-slot">trigger slot</div>
  </div>
</Tooltip>

Event outputInteract with the preview to inspect the typed payload.

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Hover and focus tooltip

Explain an unfamiliar control without interrupting the workflow.

Component usage.wrn

<Tooltip
  id="help-tooltip"
  title="Helpful information"
  description="A polished default tooltip for a modern application."
  content="Tooltips explain controls without interrupting the user.">
  <div data-slot="trigger">
    <button type="button" class="showcase-action">Hover or focus</button>
  </div>
</Tooltip>

Compact

Click tooltip

Use click activation for touch-first or interactive help.

Component usage.wrn

<Tooltip
  id="click-tooltip"
  title="Compact Tooltip"
  description="A compact configuration for dashboards and dense product surfaces."
  content="Click again or press Escape to close."
  trigger="click"
  placement="bottom"
  size="sm"
  variant="soft">
  <div data-slot="trigger">
    <button type="button" class="showcase-action">Click for help</button>
  </div>
</Tooltip>

Advanced

Interactive rich tooltip

Allow pointer interaction when the tooltip contains supporting links or controls.

Component usage.wrn

<Tooltip
  id="interactive-tooltip"
  title="Keyboard shortcut"
  description="Open global search from anywhere."
  content="Press Ctrl or Command plus K."
  trigger="both"
  placement="right"
  size="lg"
  maxWidth="22rem"
  interactive="true">
  <div data-slot="trigger">
    <button type="button" class="showcase-action">Show shortcut</button>
  </div>
</Tooltip>

Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@toggleFires when the component changes between open and closed or on and off states.

@openFires after the component opens.

@closeFires after the component closes.

Declarative handlers.wrn

<Tooltip
  @toggle='console.log(payload)'
  @open='console.log(payload)'
  @close='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Tooltip\"], [data-component=\"Tooltip\"]")

if (component) registerOutputHandler(component, "toggle", (payload) => {
  console.log("toggle", payload)
})

if (component) registerOutputHandler(component, "open", (payload) => {
  console.log("open", payload)
})

if (component) registerOutputHandler(component, "close", (payload) => {
  console.log("close", payload)
})

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`id`	string	`""`	No
`open`	boolean	`false`	No
`defaultOpen`	boolean	`false`	No
`title`	string	`""`	No
`description`	string	`""`	No
`content`	string	`"Tooltip"`	No
`trigger`	string	`"hover"`	No
`placement`	string	`"top"`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"dark"`	No
`maxWidth`	string	`"18rem"`	No
`offset`	number	`10`	No
`showArrow`	boolean	`true`	No
`interactive`	boolean	`false`	No
`disabled`	boolean	`false`	No
`class`	string	`""`	No