# Tooltip
Display a brief helper text to your user
# Examples
# Base
# Multiline
# Slot
# Toggle
# 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 the .sync modifier (Vue 2.x) or v-model:active (Vue 3.x) 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 | Override classes | boolean | - | false |
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 |
# 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 |
← Timepicker Upload →