Tooltip
Display a brief helper text to your user
Examples
Base
Show code
Position
Show code
Variants
Show code
Multiline
Show code
Slot
Show code
Toggle
Show code
Class props
| Class prop | Description | Props | Suffixes | |
|---|---|---|---|---|
| alwaysClass | Class of the tooltip trigger when is always visible. | always | ||
| arrowClass | Class of the tooltip arrow. | |||
| arrowPositionClass | Class of the tooltip arrow position. | position | top | |
| contentClass | Class of the tooltip content. | |||
| multilineClass | Class of the tooltip content when is multiline. | multiline | ||
| positionClass | Class of the tooltip trigger position. | position | top | |
| rootClass | Root class of the element. | |||
| teleportClass | Class when the dropdown is teleported. | teleport | ||
| triggerClass | Class of the tooltip trigger. | |||
| variantClass | Class of the tooltip variant. | variant | primary |
Tooltip component
Display a brief helper text to your user
html
<o-tooltip></o-tooltip>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| active | Whether tooltip is active or not, use v-model:active to make it two-way binding | boolean | - | false |
| always | Tooltip will be always active | boolean | - | false |
| animation | Tooltip default animation | string | - | From config: tooltip: { |
| closeable | Tooltip auto close options (pressing escape, clicking the content or outside) | boolean | string[] | true, false, content, outside, escape | From config: tooltip: { |
| delay | Tooltip delay before it appears (number in ms) | number | - | |
| disabled | Tooltip will be disabled | boolean | - | false |
| label | Tooltip text, unnecessary when content slot is used | string | - | |
| multiline | Tooltip will be multilined | boolean | - | false |
| override | Override existing theme classes completely | boolean | - | |
| position | Position of the Tooltip relative to the trigger | string | auto, top, bottom, left, right, top-right, top-left, bottom-left, bottom-right | From config: tooltip: { |
| teleport | Append the component to another part of the DOM. Set true to append the component to the body.In addition, any CSS selector string or an actual DOM node can be used. | string | boolean | Record<string, any> | - | From config: dropdown: { |
| triggerTag | Tooltip trigger tag name | DynamicComponent | - | From config: tooltip: { |
| triggers | Tooltip trigger events | string[] | hover, click, focus, contextmenu | From config: tooltip: { |
| variant | Color of the tooltip | string | primary, info, success, warning, danger, and any other custom color | From config: tooltip: { |
Events
| Event name | Properties | Description |
|---|---|---|
| update:active | value boolean - updated active prop | active prop two-way binding |
| close | on active change to false event | |
| open | on active change to true event |
Slots
| Name | Description | Bindings |
|---|---|---|
| content | Tooltip content, default is label prop | |
| default | Tooltip trigger slot | active boolean - tooltip active state |
Sass variables
Current theme ➜ Oruga
| SASS Variable | Default |
|---|---|
| $tooltip-arrow-margin | 2px |
| $tooltip-arrow-size | 5px |
| $tooltip-background-color | var(--#{$prefix}primary) |
| $tooltip-color | var(--#{$prefix}primary-invert) |
| $tooltip-content-box-shadow | 0px 1px 2px 1px rgba(0, 1, 0, 0.2) |
| $tooltip-content-font-size | 0.85rem |
| $tooltip-content-max-width | 300px |
| $tooltip-content-multiline-width | 300px |
| $tooltip-content-padding | 0.35rem 0.75rem |
| $tooltip-content-radius-large | 6px |
| $tooltip-content-weight-normal | 400 |
| $tooltip-content-zindex | 38 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
The theme does not have any custom variables for this component.
Current theme ➜ Bootstrap
| SASS Variable | Default |
|---|---|
| $tooltip-arrow-spacer | 2px |
| $tooltip-content-multiline-width | 50vw |
| $tooltip-shadow | $box-shadow-sm |
| $tooltip-zindex | $zindex-tooltip |
See ➜ 📄 Full scss file