Tooltip

A web component for plain or rich tooltips shown on hover and focus, attachable to any element through a directive.

A short label, or richer content, shown next to an element while it is hovered or focused.

Installation

npm install @3mo/tooltip

import '@3mo/tooltip'

Usage

<mo-icon-button icon='skip_previous' ${tooltip('Previous')}></mo-icon-button>
<mo-icon-button icon='fast_rewind' ${tooltip('Rewind')}></mo-icon-button>
<mo-icon-button icon='play_arrow' ${tooltip('Play')}></mo-icon-button>
<mo-icon-button icon='fast_forward' ${tooltip('Forward')}></mo-icon-button>
<mo-icon-button icon='skip_next' ${tooltip('Next')}></mo-icon-button>

Examples

• Placement — The second argument picks the side of the anchor; the sides are logical, so pick a right-to-left language in the toolbar to see inline start and end swap.
• Rich — A template in place of the text makes a rich tooltip, drawn on a surface rather than in the text color.
• Interest For — A native interestfor invoker can show a mo-tooltip by its id, leaving the timing - including interest-delay - to the browser.

Accessibility

A tooltip of plain text becomes its anchor's aria-label, replacing the anchor's own name; a tooltip with elements inside sets nothing.

API

mo-tooltip

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | anchorElement | | HTMLElement \| undefined | | The element the tooltip is tethered to: its assigned anchor, or the native invoker showing interest. | | placement | placement | PopoverPlacement \| undefined | | The side of the anchor the tooltip shows on: block-start, block-end, inline-start or inline-end. | | anchor | anchor | HTMLElement \| undefined | | The element the tooltip is anchored to, set as a property. | | rich | rich | boolean | false | Set by the tooltip itself when its content holds elements, which gives it a surface that can be interacted with. |

Events

| Name | Detail | Description | | --- | --- | --- | | openChange | boolean | Dispatched when the tooltip shows or hides. |

Slots

| Name | Description | | --- | --- | | (default) | The text of the tooltip, or rich content. |

CSS custom properties

| Name | Description | | --- | --- | | --mo-tooltip-font-size | The font size of the tooltip. |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH