Skip to content

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

Show code

Class props

'Classes applied to the element'

Tooltip component

Display a brief helper text to your user

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

Props

Prop nameDescriptionTypeValuesDefault
activeWhether tooltip is active or not, use v-model:active to make it two-way bindingboolean-false
alwaysTooltip will be always activeboolean-false
animationTooltip default animationstring-
From config:
tooltip: {
  animation: "fade"
}
closeableTooltip auto close options (pressing escape, clicking the content or outside)string[] | booleantrue, false, content, outside, escape
From config:
tooltip: {
  closeable: ["escape","outside","content"]
}
delayTooltip delay before it appears (number in ms)number-
disabledTooltip will be disabledboolean-false
labelTooltip text, unnecessary when content slot is usedstring-
multilineTooltip will be multilinedboolean-false
overrideOverride existing theme classes completelyboolean-
positionPosition of the Tooltip relative to the triggerstringauto, top, bottom, left, right, top-right, top-left, bottom-left, bottom-right
From config:
tooltip: {
  position: "auto"
}
teleportAppend the component to another part of the DOM.
Set true to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used.
boolean|string|object-
From config:
dropdown: {
  teleport: false
}
triggerTagTooltip trigger tag nameDynamicComponent-
From config:
tooltip: {
  triggerTag: "div"
}
triggersTooltip trigger eventsstring[]hover, click, focus, contextmenu
From config:
tooltip: {
  triggers: ["hover"]
}
variantColor of the tooltipstringprimary, info, success, warning, danger, and any other custom color
From config:
tooltip: {
  variant: undefined
}

Events

Event namePropertiesDescription
update:activevalue boolean - updated active propactive prop two-way binding
closeon active change to false event
openon active change to true event

Slots

NameDescriptionBindings
contentTooltip content, default is label prop
defaultTooltip trigger slotactive boolean - tooltip active state

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.