Skip to content
On this page

Tooltip

Display a brief helper text to your user

Base

Multiline

Slot

Toggle


I'm never closing

Class props


Tooltip!
How does Class props inspector work?
Class propDescriptionPropsSuffixes
alwaysClassClass of the tooltip trigger when is always visible.
arrowClassClass of the tooltip arrow.
arrowOrderClassClass of the tooltip arrow when its position changes.positiontop
bottom
left
right
contentClassClass of the tooltip content.
multilineClassClass of the tooltip content when is multiline.
orderClassClass of the tooltip trigger when its position changes.positiontop
bottom
left
right
rootClassRoot class of the element.
triggerClassClass of the tooltip trigger.
variantClassClass of the tooltip variant.variantprimary
info
warning
danger


Props

Prop nameDescriptionTypeValuesDefault
activeWhether tooltip is active or not, use v-model:active to make it two-way bindingboolean-true
alwaysTooltip will be always activeboolean-
animatedTooltip will have an animationboolean-true
animationTooltip default animationstring-
From config

tooltip: {
  animation: 'fade'
}
appendToBodyAppend tooltip content to bodyboolean-
autoCloseTooltip auto close optionsarray|booleantrue, false, 'inside', 'outside'true
delayTooltip delay before it appears (number in ms)number-
labelTooltip textstring-
multilineTooltip will be multilinedboolean-
overrideboolean-
positionTooltip position in relation to the elementstringtop, bottom, left, right
From config

tooltip: {
  position: 'top'
}
triggersTooltip trigger eventsarrayhover, click, focus, contextmenu
From config

tooltip: {
  triggers: ['hover']
}
variantColor of the tooltipstring|func|arrayprimary, info, success, warning, danger, and any other custom color

Events

Event namePropertiesDescription
open
close

Slots

NameDescriptionBindings
content
default

Style

📄 Full scss file

CSS VariableSASS VariableDefault
--oruga-tooltip-arrow-margin$tooltip-arrow-margin2px
--oruga-tooltip-arrow-size$tooltip-arrow-size5px
--oruga-tooltip-background-color$tooltip-background-color$primary
--oruga-tooltip-color$tooltip-color$primary-invert
--oruga-tooltip-content-box-shadow$tooltip-content-box-shadow0px 1px 2px 1px rgba(0, 1, 0, 0.2)
--oruga-tooltip-content-font-size$tooltip-content-font-size0.85rem
--oruga-tooltip-content-max-width$tooltip-content-max-width300px
--oruga-tooltip-content-multiline-width$tooltip-content-multiline-width300px
--oruga-tooltip-content-padding$tooltip-content-padding0.35rem 0.75rem
--oruga-tooltip-content-radius-large$tooltip-content-radius-large6px
--oruga-tooltip-content-weight-normal$tooltip-content-weight-normal400
--oruga-tooltip-content-zindex$tooltip-content-zindex38

Released under the MIT License.