Tooltip

<dsx-tooltip> — Tooltip

Inline tooltip wrapper with configurable placement and hover/click/focus trigger modes.

Live Preview

Import

import '@bnotk/dsx/components/tooltip.js';

Usage

<dsx-tooltip content="Helpful context" placement="right">
  <button type="button">Hover me</button>
</dsx-tooltip>

Elements

<dsx-tooltip>

Wraps a trigger element in the default slot and shows a positioned tooltip box inside the shadow root.

Properties

Property	Type	Default	Description
content	string	”	Tooltip text content.
placement	’top’ | ‘bottom’ | ‘left’ | ‘right'	'top’	Controls which side of the trigger receives the tooltip.
trigger	’hover’ | ‘click’ | ‘focus'	'hover’	Selects the interaction mode used to show or hide the tooltip.

Methods

None.

Events

None.

Slots

Slot	Description
default	The trigger content rendered inside .trigger.

CSS Parts

This element does not expose shadow parts.

Notes

• Hover mode uses mouseenter and mouseleave on the trigger span.
• Focus mode uses focus and blur; click mode toggles visibility on click.
• The tooltip box is always in the DOM with role="tooltip" and switches visibility through opacity plus aria-hidden.

Behavior Notes

• The host is inline-block and position: relative; placement styles are applied through host attributes.
• The tooltip starts hidden (opacity: 0) and becomes visible when the reflected _visible attribute is present.

Styling Notes

• Dark tooltip surface uses --ds2-color-main-dark and white text.
• Padding is 0.375rem × 0.625rem with a max width of 20rem and normal wrapping.