# Tooltip
Display a brief helper text to your user
# Examples
# Base
# Multiline
# Slot
# Toggle
# 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 |
label | Tooltip text | string | - | |
delay | Tooltip delay before it appears (number in ms) | number | - | |
position | Tooltip position in relation to the element | string | top , bottom , left , right | Config -> 'tooltip.position': 'top' |
triggers | Tooltip trigger events | array | hover , click , focus , contextmenu | Config -> 'tooltip.triggers': ['hover'] |
always | Tooltip will be always active | boolean | - | |
animated | Tooltip will have an animation | boolean | - | true |
animation | Tooltip default animation | string | - | Config -> 'tooltip.animation': 'fade' |
autoClose | Tooltip auto close options | array|boolean | true , false , 'inside' , 'outside' | true |
multiline | Tooltip will be multilined | boolean | - | |
appendToBody | Append tooltip content to body | boolean | - | |
variant | Color of the tooltip | string | primary , info , success , warning , danger , and any other custom color | |
rootClass | string | - | ||
contentClass | string | - | ||
triggerClass | string | - | ||
multilineClass | string | - | ||
alwaysClass | string | - | ||
variantClass | string | - |
# Slots
Name | Description | Bindings |
---|---|---|
content | ||
default | [ { "name": "ref" } ] |
# 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 |