Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️  Build and prototype fast web applications.

Indielayer
Indielayer UIIndielayer UI
UI
v2.1.0

Tooltip

Tooltips display contextual help on hover. Use XToggleTip for a compact info-icon pattern beside labels.

#
Usage

Short hint via the tooltip prop on icon buttons.

#
Content

Title and body using the tooltip slot.

#
Placement

top, bottom, left, and right positions.

#
Toggle tip

Info icon with helper text for labels and form fields.

API rate limit

#
States

Disabled tooltips do not open on hover.

#API

Tooltip

props

Name
Description
Type
Default
Values
Required
tag
Root element tag wrapping the trigger.
String
div
tooltip
Tooltip text shown on hover. Prefer the tooltip slot for custom content.
String
disabled
Disables showing the tooltip.
Boolean
false
position
Preferred placement relative to the trigger (top, bottom, left, right).
String
bottom

slots

Name
Description
default
Trigger content the tooltip is attached to.
tooltip
Custom tooltip content; overrides the `tooltip` prop.

ToggleTip

props

Name
Description
Type
Default
Values
Required
content
HTML or text shown inside the tooltip.
String
icon
Icon name for the trigger. Defaults to the info icon.
String
tag
upload