Tooltip

The Tooltip component displays a short contextual information text bubble when the user hovers over an element, or when that owning element receives focus, but is otherwise not visible on the page. The component implements the W3C ARIA APG Tooltip Pattern.

Examples

Base

While a tooltip can be placed on any content, they generally are tips for tools or controls, such as providing additional content for icons that have brief labels. An example of a native browser tooltip is the way some browsers display an element's title attribute on long mouse hover. However, this feature cannot be activated through either keyboard focus or touch interaction, making this feature inaccessible. If the information is important enough to include as a tooltip or title, consider including it in visible text.

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 component accepts several different trigger variants, such as openOnClick or openOnContextmenu to only open on right click instead of left click. By default, only openOnHover is set. The action that close the component can also be customized using the closeable, closeOnOutside and closeOnEscape props.

Show code

HTML

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

        <o-tooltip
            label="Click somewhere to close"
            open-on-click
            close-on-outside>
            <o-button label="Click me" />
        </o-tooltip>

        <o-tooltip
            label="Click somewhere to close"
            open-on-contextmenu
            close-on-outside>
            <o-button label="Right click me" />
        </o-tooltip>

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

        <o-tooltip
            variant="danger"
            label="Tooltip right"
            position="right"
            :open-on-hover="false"
            :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>

Templates

The tooltip label can be customised using the content template slot.

Accessibility Note:

In terms of accessibility, tooltips provide additional information, generally with no direct interaction on the tooltip itself. Therefore, they should not contain any interactive elements, like links, inputs, or buttons; and it will never receive active focus itself. A tooltip is not considered to be a popup in this context.

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"
            open-on-click
            close-on-outside
            close-on-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" }
closeOnEscape	Close when pressing escape key	boolean	-	From config: tooltip: {   closeOnEscape: false }
closeOnOutside	Close when clicked outside of the panel	boolean	-	From config: tooltip: {   closeOnOutside: false }
closeable	Close on hover out of the content	boolean	-	From config: tooltip: {   closeable: true }
delay	Tooltip delay before it appears (number in ms)	number	-
disabled	Tooltip will be disabled	boolean	-	false
id	A unique HTML id for the tooltip element	string	-	useId()
label	Tooltip text, unnecessary when content slot is used	string	-
maxWidth	Limit the tooltip content width	string	-	From config: tooltip: {   maxWidth: undefined }
multiline	deprecated - use maxWidth instead Tooltip will be multilined	boolean	-	false
openOnClick	Show when clicked on the trigger	boolean	-	From config: tooltip: {   openOnClick: false }
openOnContextmenu	Show when right clicked on the trigger	boolean	-	From config: tooltip: {   openOnContextmenu: false }
openOnFocus	Show when trigger get focused	boolean	-	From config: tooltip: {   openOnFocus: false }
openOnHover	Show when hover over the trigger	boolean	-	From config: tooltip: {   openOnHover: true }
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" }
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	event Event - native event	on active state changes to false
open	event Event - native event	on active state changes to true

Slots

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

Class Inspector

Classes applied to the element:

➜ Want to know how does the Class 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-zindex	map.get(vars.$zindex, "tooltip")
$tooltip-content-font-size	0.85rem
$tooltip-content-color	h.useVar("white")
$tooltip-content-font-weight	h.useVar("font-weight")
$tooltip-content-line-height	h.useVar("line-height")
$tooltip-content-padding	0.35em 0.75em
$tooltip-content-multiline-width	300px
$tooltip-content-box-shadow	h.useVar("overlay-box-shadow")
$tooltip-content-background-color	h.useVar("grey-darkest")
$tooltip-content-border-radius	h.useVar("border-radius")
$tooltip-arrow-margin	2px
$tooltip-arrow-size	5px

See ➜ 📄 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 ➜ 📄 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 ➜ 📄 SCSS file