OrugaTooltip
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
I'm never closing
Show code
Class props
Tooltip!
| Class prop | Description | Props | Suffixes | |
|---|---|---|---|---|
| alwaysClass | Class of the tooltip trigger when is always visible. | |||
| arrowClass | Class of the tooltip arrow. | |||
| arrowOrderClass | Class of the tooltip arrow when its position changes. | position | top | |
| contentClass | Class of the tooltip content. | |||
| multilineClass | Class of the tooltip content when is multiline. | |||
| orderClass | Class of the tooltip trigger when its position changes. | position | top | |
| rootClass | Root class of the element. | |||
| triggerClass | Class of the tooltip trigger. | |||
| variantClass | Class of the tooltip variant. | variant | primary |
Tooltip component
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 | - | true |
| always | Tooltip will be always active | boolean | - | |
| animated | Tooltip will have an animation | boolean | - | true |
| animation | Tooltip default animation | string | - | From config: tooltip: { |
| appendToBody | Append tooltip content to body | boolean | - | |
| autoClose | Tooltip auto close options | array|boolean | true, false, 'inside', 'outside' | true |
| delay | Tooltip delay before it appears (number in ms) | number | - | |
| label | Tooltip text | string | - | |
| multiline | Tooltip will be multilined | boolean | - | |
| override | boolean | - | ||
| position | Tooltip position in relation to the element | Position | 'auto' | top, bottom, left, right, `` | From config: tooltip: { |
| triggers | Tooltip trigger events | array | hover, click, focus, contextmenu | From config: tooltip: { |
| variant | Color of the tooltip | string|func|array | primary, info, success, warning, danger, and any other custom color |
Events
| Event name | Properties | Description |
|---|---|---|
| open | ||
| close |
Slots
| Name | Description | Bindings |
|---|---|---|
| content | ||
| default |
Sass variables
Current theme ➜ Oruga Base
| SASS Variable | Default |
|---|---|
| $tooltip-arrow-margin | 2px |
| $tooltip-arrow-size | 5px |
| $tooltip-background-color | $primary |
| $tooltip-color | $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 ➜ Oruga Full
| SASS Variable | Default |
|---|---|
| $tooltip-arrow-margin | 2px |
| $tooltip-arrow-size | 5px |
| $tooltip-background-color | $primary |
| $tooltip-color | $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