OrugaTooltip
Display a brief helper text to your user
Base
Multiline
Slot
Toggle
I'm never closing
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 |
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 | string | 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 |
Style
| CSS Variable | SASS Variable | Default |
|---|---|---|
| --oruga-tooltip-arrow-margin | $tooltip-arrow-margin | 2px |
| --oruga-tooltip-arrow-size | $tooltip-arrow-size | 5px |
| --oruga-tooltip-background-color | $tooltip-background-color | $primary |
| --oruga-tooltip-color | $tooltip-color | $primary-invert |
| --oruga-tooltip-content-box-shadow | $tooltip-content-box-shadow | 0px 1px 2px 1px rgba(0, 1, 0, 0.2) |
| --oruga-tooltip-content-font-size | $tooltip-content-font-size | 0.85rem |
| --oruga-tooltip-content-max-width | $tooltip-content-max-width | 300px |
| --oruga-tooltip-content-multiline-width | $tooltip-content-multiline-width | 300px |
| --oruga-tooltip-content-padding | $tooltip-content-padding | 0.35rem 0.75rem |
| --oruga-tooltip-content-radius-large | $tooltip-content-radius-large | 6px |
| --oruga-tooltip-content-weight-normal | $tooltip-content-weight-normal | 400 |
| --oruga-tooltip-content-zindex | $tooltip-content-zindex | 38 |