Tooltip

The Tooltip component displays a short contextual help text when the user hovers over it. The component implements the W3C ARIA APG Tooltip Pattern.

Examples

Base

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-tooltip label="Tooltip">
            <o-button label="Hover me! " />
        </o-tooltip>

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

        <o-tooltip label="I'm on body" teleport>
            <o-button variant="info" label="Append on body" />
        </o-tooltip>
    </p>
</section>

Position

The direction in which the tooltip opens can be defined by the position prop. By default, the direction is automatically calculated from the distance to the edge of the window. Adding the teleport prop additionally will move the tooltip to the referenced DOM location instead.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-field>
            <o-switch v-model="teleport" label="teleport" />
        </o-field>

        <o-tooltip
            label="Tooltip right"
            :teleport="teleport"
            position="right">
            <o-button label="Right" />
        </o-tooltip>

        <o-tooltip label="Tooltip top" :teleport="teleport" position="top">
            <o-button label="Top" />
        </o-tooltip>

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

        <o-tooltip
            label="Tooltip left"
            :teleport="teleport"
            position="left">
            <o-button label="Left" />
        </o-tooltip>
    </p>
</section>

JS

import { ref } from "vue";

const teleport = ref(false);

Triggers

The action to trigger the tooltip can be customized using the triggers prop. The action that closes the tooltip can be customized using the closaeble prop.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-field>
            <o-switch v-model="active" label="Toggle" />
        </o-field>

        <o-tooltip
            label="I'm never closing"
            :triggers="['click']"
            :closeable="['outside']">
            <o-button label="Click me" />
        </o-tooltip>

        <o-tooltip
            label="I'm never closing"
            :triggers="['contextmenu']"
            :closeable="['outside']">
            <o-button label="Right click me" />
        </o-tooltip>

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

        <o-tooltip
            variant="danger"
            label="Tooltip right"
            position="right"
            :triggers="[]"
            :closeable="false"
            :active="active">
            <o-button label="Toggled" />
        </o-tooltip>
    </p>
</section>

JS

import { ref } from "vue";

const active = ref(true);

Variants

Different styles can be achieved with the variant prop.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-tooltip label="Default">
            <o-button label="Default" />
        </o-tooltip>

        <o-tooltip label="Primary" variant="primary">
            <o-button label="Primary" variant="primary" />
        </o-tooltip>

        <o-tooltip label="Secondary" variant="secondary">
            <o-button label="Secondary" variant="secondary" />
        </o-tooltip>

        <o-tooltip label="Success" variant="success">
            <o-button label="Success" variant="success" />
        </o-tooltip>

        <o-tooltip label="Danger" variant="danger">
            <o-button label="Danger" variant="danger" />
        </o-tooltip>

        <o-tooltip label="Warning" variant="warning">
            <o-button label="Warning" variant="warning" />
        </o-tooltip>

        <o-tooltip label="Info" variant="info">
            <o-button label="Info" variant="info" />
        </o-tooltip>
    </p>
</section>

Multiline

Sometimes the tooltip label can be very long. Consider setting the multiline prop to force a line break.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-tooltip
            label="Tooltip multiline, probably because it's too long for a casual tooltip"
            multiline>
            <o-button label="Multiline" />
        </o-tooltip>

        <o-tooltip label="It's not brief, but it's also not long" multiline>
            <o-button label="Multiline (small)" />
        </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"
            multiline>
            <o-button label="Multiline (large)" />
        </o-tooltip>
    </p>
</section>

Slot

The tooltip label can be customised using the content slot.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-tooltip position="bottom" multiline>
            <o-button label="Html Content" />

            <template #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']">
            <o-button label="Action" />

            <template #content>
                <o-icon icon="heart" variant="danger" />
                <o-icon icon="thumbs-up" variant="info" />
                <o-icon icon="thumbs-down" variant="warning" />
                <o-icon icon="smile-beam" />
            </template>
        </o-tooltip>
    </p>
</section>

Tooltip component

Display a brief helper text to your user.

<o-tooltip></o-tooltip>

Props

Prop name	Description	Type	Values	Default
active	Whether tooltip is active or not, use v-model:active to make it two-way binding	boolean	-	false
always	Tooltip will be always active	boolean	-	false
animation	Tooltip default animation	string	-	From config: tooltip: {   animation: "fade" }
closeable	Tooltip auto close options (pressing escape, clicking the content or outside)	boolean | ("content" | "escape" | "outside")[]	true, false, content, outside, escape	From config: tooltip: {   closeable: ["escape","outside","content"] }
delay	Tooltip delay before it appears (number in ms)	number	-
disabled	Tooltip will be disabled	boolean	-	false
label	Tooltip text, unnecessary when content slot is used	string	-
multiline	Tooltip will be multilined	boolean	-	false
override	Override existing theme classes completely	boolean	-
position	Position of the Tooltip relative to the trigger	"auto" | "bottom-left" | "bottom-right" | "bottom" | "left" | "right" | "top-left" | "top-right" | "top"	auto, top, bottom, left, right, top-right, top-left, bottom-left, bottom-right	From config: tooltip: {   position: "auto" }
teleport	Append 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 | object | string	-	From config: dropdown: {   teleport: false }
triggerTag	Tooltip trigger tag name	DynamicComponent	-	From config: tooltip: {   triggerTag: "div" }
triggers	Tooltip trigger events	("click" | "contextmenu" | "focus" | "hover")[]	hover, click, focus, contextmenu	From config: tooltip: {   triggers: ["hover","focus"] }
variant	Color of the tooltip	string	primary, info, success, warning, danger, and any other custom color	From config: tooltip: {   variant: undefined }

Events

Event name	Properties	Description
update:active	value boolean - updated active prop	active prop two-way binding
close		on active change to false event
open		on active change to true event

Slots

Name	Description	Bindings
default	Tooltip trigger slot	active boolean - tooltip active state
content	Tooltip content, default is label prop

Class Inspector

Classes applied to the element:

How does the 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.

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.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
teleportClass	Class of the root element when teleported.	teleport
triggerClass	Class of the trigger element.
contentClass	Class of the content element.
positionClass	Class of the content element with position.	position	top bottom left right
variantClass	Class of the content element with variant.	variant	primary info warning danger
multilineClass	Class of the content element when is multiline.	multiline
alwaysClass	Class of the content element when is always visible.	always
arrowClass	Class of the arrow element.
arrowPositionClass	Class of the arrow element with position.	position	top bottom left right
arrowVariantClass	Class of the arrow element with variant.	variant	primary info warning danger

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$tooltip-arrow-margin	2px
$tooltip-arrow-size	5px
$tooltip-background-color	var(--#{$prefix}primary)
$tooltip-color	var(--#{$prefix}primary-invert)
$tooltip-content-box-shadow	0px 1px 2px 1px rgba(0, 1, 0, 0.2)
$tooltip-content-font-size	0.85rem
$tooltip-content-max-width	300px
$tooltip-content-multiline-width	300px
$tooltip-content-padding	0.35rem 0.75rem
$tooltip-content-radius-large	6px
$tooltip-content-weight-normal	400
$tooltip-content-zindex	38

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$tooltip-arrow-size	5px
$tooltip-arrow-margin	2px
$tooltip-content-multiline-width	300px
$tooltip-shadow	0 1px 2px 1px rgba(0, 1, 0, 0.2)
$tooltip-z	38
$tooltip-colors	dv.$colors
$tooltip-border-radius	css.getVar("radius")
$tooltip-bg	css.getVar("scheme-main-bis")
$tooltip-color	css.getVar("text-body")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS Variable	Default
$tooltip-arrow-spacer	2px
$tooltip-content-multiline-width	50vw
$tooltip-shadow	$box-shadow-sm
$tooltip-zindex	$zindex-tooltip

See ➜ 📄 Full scss file