# Tooltip

Display a brief helper text to your user

edit on github

# 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
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