Skip to content
On this page

Tooltip

Display a brief helper text to your user

Examples

Base

Show code

Position

Show code

Variants

Show code

Multiline

Show code

Slot

Show code

Toggle

I'm never closing
Show code

Class props

'Classes applied to the element'
Tooltip!
How does the 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

Tooltip component

html
<o-tooltip></o-tooltip>

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 elementPosition | 'auto'top, 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

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$tooltip-arrow-margin2px
$tooltip-arrow-size5px
$tooltip-background-color$primary
$tooltip-color$primary-invert
$tooltip-content-box-shadow0px 1px 2px 1px rgba(0, 1, 0, 0.2)
$tooltip-content-font-size0.85rem
$tooltip-content-max-width300px
$tooltip-content-multiline-width300px
$tooltip-content-padding0.35rem 0.75rem
$tooltip-content-radius-large6px
$tooltip-content-weight-normal400
$tooltip-content-zindex38

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$tooltip-arrow-margin2px
$tooltip-arrow-size5px
$tooltip-background-color$primary
$tooltip-color$primary-invert
$tooltip-content-box-shadow0px 1px 2px 1px rgba(0, 1, 0, 0.2)
$tooltip-content-font-size0.85rem
$tooltip-content-max-width300px
$tooltip-content-multiline-width300px
$tooltip-content-padding0.35rem 0.75rem
$tooltip-content-radius-large6px
$tooltip-content-weight-normal400
$tooltip-content-zindex38

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault
$tooltip-arrow-spacer2px
$tooltip-content-multiline-width50vw
$tooltip-shadow$box-shadow-sm
$tooltip-zindex$zindex-tooltip

See ➜ 📄 Full scss file

Released under the MIT License.