Theme:
Ui3nTooltip
Tooltip component for displaying additional information on hover or click.
Props
| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Root element id |
modelValue | boolean | undefined | — | Whether tooltip is open |
content | string | undefined | — | Tooltip content |
maxContentWidth | string | number | undefined | — | Maximum content width |
color | string | undefined | — | Tooltip color |
textColor | string | undefined | — | Tooltip text color |
placement | Ui3nTooltipPlacement | undefined | "top" | Tooltip placement |
triggerElement | HTMLElement | Ui3nVirtualElement | undefined | — | External element the tooltip is positioned against. When set, this node is the floating-ui reference and receives hover/click listeners. |
positionStrategy | "absolute" | "fixed" | undefined | — | Position strategy |
offsetX | string | number | undefined | 0 | Offset X |
offsetY | string | number | undefined | 0 | Offset Y |
trigger | "click" | "hover" | "manual" | undefined | "hover" | Trigger type |
disabled | boolean | undefined | false | Whether tooltip is disabled |
Events
| Event Name | Arguments / Value Type | Description |
|---|---|---|
update:modelValue | value: boolean | — |
close | | — |
open | | — |
opened | | — |
closed | | — |
Slots
| Slot Name | Scope Props (v-slot) | Description |
|---|---|---|
#default | — | Default slot |
#content | — | Content slot |
CSS Variables
Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.
| Name | Default |
|---|---|
--ui3n-tooltip-arrow-size | 8px |
--ui3n-tooltip-bg-color | var(--color-bg-block-tritery-default) |
--ui3n-tooltip-border-radius | 6px |
--ui3n-tooltip-font-size | 11px |
--ui3n-tooltip-line-height | 12px |
--ui3n-tooltip-max-width | 400px |
--ui3n-tooltip-padding | 6px 8px |
--ui3n-tooltip-text-color | var(--color-text-block-darkery-default) |
Usage Examples
Simple tooltip
Simple tooltip
Basic tooltip on hover
Tooltip placements
Tooltip placements
Tooltips with different placements
Custom tooltip content
Custom tooltip content
Tooltip with custom content slot
External trigger element
External trigger element
Tooltip positioned against a DOM node passed via triggerElement
Manual tooltip on an external element
Manual tooltip on an external element
Open and close a tooltip next to an external node with v-model
Programmatic plugin
Install the plugin with app.use(tooltips), then call $tooltip.show(el, options) to open immediately or $tooltip.attach(el, options) to bind hover/click.
Programmatic plugin
show() opens immediately; attach() binds hover on the target