Tooltip

Display a brief helper text to your user

Examples

Base

Show code

HTML

<section class="odocs-spaced">
    <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>
</section>

Position

Show code

HTML

<section class="odocs-spaced">
    <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>
</section>

JS

import { ref } from "vue";

const teleport = ref(false);

Variants

Show code

HTML

<section class="odocs-spaced">
    <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>
</section>

Multiline

Show code

HTML

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

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

Slot

Show code

HTML

<section class="odocs-spaced">
    <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']">
        <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-button label="Action" />
    </o-tooltip>
</section>

Toggle

Show code

HTML

<section>
    <o-field>
        <o-switch v-model="active" label="Toggle" />
    </o-field>

    <div class="odocs-spaced">
        <o-tooltip
            label="I'm never closing"
            :active="active"
            always
            position="bottom">
            <o-button label="Always" />
        </o-tooltip>

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

JS

import { ref } from "vue";

const active = ref(true);

Class props

'Classes applied to the element'

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 | string[]	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	string	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.	string | boolean | Record<string, any>	-	From config: dropdown: {   teleport: false }
triggerTag	Tooltip trigger tag name	DynamicComponent	-	From config: tooltip: {   triggerTag: "div" }
triggers	Tooltip trigger events	string[]	hover, click, focus, contextmenu	From config: tooltip: {   triggers: ["hover"] }
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
content	Tooltip content, default is label prop
default	Tooltip trigger slot	active boolean - tooltip active state

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

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

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