Tooltip

Accessible tooltips with hover and focus triggers.

Usage

<w-tooltip>
  <w-slot trigger><button>Hover me</button></w-slot>
  <w-slot body><div>Helpful information</div></w-slot>
</w-tooltip>

Props

Prop	Type	Default	Description
open	boolean	false	Whether the tooltip is visible
placement	string	"top"	Position relative to trigger
delay	number	300	Delay before showing (ms)
close-delay	number	100	Delay before hiding (ms)
portal	boolean	true	Teleport to body for z-index safety

Slots

Slot	Element	Description
trigger	Any	Element that shows tooltip on hover/focus
content	Any	Tooltip content

Events

Event	Description
show	Fired when tooltip becomes visible
hide	Fired when tooltip is hidden

Methods

Method	Description
show()	Show the tooltip immediately
hide()	Hide the tooltip immediately

Keyboard

Key	Action
Escape	Hide tooltip

Examples

Instant Tooltip

<w-tooltip delay="0" close-delay="0">
  <w-slot trigger><span>?</span></w-slot>
  <w-slot body><div>Instant help</div></w-slot>
</w-tooltip>

Custom Placement

<w-tooltip placement="right">
  <w-slot trigger><button>Info</button></w-slot>
  <w-slot body><div>Tooltip on the right</div></w-slot>
</w-tooltip>

Available placements:

• top, top-start, top-end
• bottom, bottom-start, bottom-end
• left, left-start, left-end
• right, right-start, right-end

Rich Content

<w-tooltip>
  <w-slot trigger><button>Details</button></w-slot>
  <w-slot body>
    <div>
      <strong>Title</strong>
      <p>Description with multiple lines</p>
    </div>
  </w-slot>
</w-tooltip>

CSS Transitions

.tooltip-enter {
}
.tooltip-enter-from {
  opacity: 0;
}
.tooltip-enter-to {
  opacity: 1;
}

.tooltip-leave {
}
.tooltip-leave-from {
  opacity: 1;
}
.tooltip-leave-to {
  opacity: 0;
}

Styling

Content is teleported to the portal when shown and positioned by autoPosition. Style it via role="tooltip". The host is display: contents, so it doesn't disturb inline flow around the trigger.

[role="tooltip"] {
  background: #333;
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.875rem;
  max-width: 250px;
  pointer-events: none;
}

w-tooltip w-slot[trigger] > *[aria-describedby] {
  /* The trigger while a tooltip is associated with it */
}

Selector	Targets
[role="tooltip"]	The tooltip body wherever it's rendered
w-tooltip[open]	Host while shown
[data-portal-owner^="w-tooltip"]	A specific tooltip's portaled body

Accessibility

• Content has role="tooltip"
• Trigger linked via aria-describedby
• Shows on both hover and focus
• Dismissible with Escape key
• Stays visible when hovering over content