Tooltip

Display a brief helper text to your user

---

edit on github

Examples

Base

<template>
  <section>
    <o-tooltip label="Tooltip right" position="right">
      <o-button>
        Right
      </o-button>
    </o-tooltip>

    <o-tooltip label="Tooltip top">
      <o-button>
        Top (default)
      </o-button>
    </o-tooltip>

    <o-tooltip label="Tooltip bottom" position="bottom">
      <o-button>
        Bottom
      </o-button>
    </o-tooltip>

    <o-tooltip label="Tooltip left" position="left">
      <o-button>
        Left
      </o-button>
    </o-tooltip>

    <o-tooltip label="delayed by 1000ms" :delay="1000">
      <o-button variant="warning">
        Delayed
      </o-button>
    </o-tooltip>
  </section>
</template>

<script>
  export default {}
</script>

Multiline

<template>
  <section>
    <o-tooltip label="Tooltip multiline, probably because it's too long for a casual tooltip" multiline>
      <o-button>
        Multiline (default)
      </o-button>
    </o-tooltip>

    <o-tooltip label="It's not brief, but it's also not long" size="small" multiline>
      <o-button>
        Multiline (small)
      </o-button>
    </o-tooltip>

    <o-tooltip
      label="Tooltip large multiline, because it's too long to be on a medium size. Did I tell you it's really long? Yes, it is — I assure you!"
      position="bottom"
      size="large"
      multiline
    >
      <o-button>
        Multiline (large)
      </o-button>
    </o-tooltip>
  </section>
</template>

<script>
  export default {}
</script>

Slot

<template>
  <section>
    <o-tooltip position="bottom" multiline>
      <o-button>Html Content</o-button>
      <template v-slot:content> <b>Lorem ipsum dolor sit amet</b>, consectetur warning elit. <i>Fusce id fermentum quam</i>. </template>
    </o-tooltip>

    <o-tooltip variant="primary" :triggers="['click']" :auto-close="['outside', 'escape']">
      <template v-slot:content>
        <o-icon icon="heart" variant="danger"></o-icon>
        <o-icon icon="thumbs-up" variant="info"></o-icon>
        <o-icon icon="thumbs-down" variant="warning"></o-icon>
        <o-icon icon="smile-beam"></o-icon>
      </template>
      <o-button>Action</o-button>
    </o-tooltip>
  </section>
</template>

<script>
  export default {}
</script>

Toggle

<template>
  <section>
    <o-button @click="active = !active">
      Toggle
    </o-button>

    <hr />

    <o-tooltip label="I'm never closing" :active="active" always>
      <o-button>
        Always
      </o-button>
    </o-tooltip>

    <o-tooltip label="Tooltip right" position="right" :active="active">
      <o-button>
        Right
      </o-button>
    </o-tooltip>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        active: true
      }
    }
  }
</script>

Class props

📄 Full scss file

Tooltip!

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

Class prop	Description	Props	Suffixes
alwaysClass	Class of the tooltip trigger when is always visible.
arrowClass	Class of the tooltip arrow.
arrowOrderClass	Class of the tooltip arrow when its position changes.	position	top bottom left right
contentClass	Class of the tooltip content.
multilineClass	Class of the tooltip content when is multiline.
orderClass	Class of the tooltip trigger when its position changes.	position	top bottom left right
rootClass	Root class of the element.
triggerClass	Class of the tooltip trigger.
variantClass	Class of the tooltip variant.	variant	primary info warning danger

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
always	Tooltip will be always active	boolean	-
animated	Tooltip will have an animation	boolean	-	true
animation	Tooltip default animation	string	-	From config tooltip: {   animation: 'fade' }
appendToBody	Append tooltip content to body	boolean	-
autoClose	Tooltip auto close options	array|boolean	true, false, 'inside', 'outside'	true
delay	Tooltip delay before it appears (number in ms)	number	-
label	Tooltip text	string	-
multiline	Tooltip will be multilined	boolean	-
override	Override classes	boolean	-	false
position	Tooltip position in relation to the element	string	top, bottom, left, right	From config tooltip: {   position: 'top' }
triggers	Tooltip trigger events	array	hover, click, focus, contextmenu	From config tooltip: {   triggers: ['hover'] }
variant	Color of the tooltip	string|func|array	primary, info, success, warning, danger, and any other custom color

Slots

Name	Description	Bindings
content
default

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