Tooltip

Display a brief helper text to your user

<template>
    <section class="b-tooltips">

        <b-tooltip label="Tooltip right"
            position="is-right">
            <b-button label="Right" type="is-dark" />
        </b-tooltip>

        <b-tooltip label="Tooltip top">
            <b-button label="Top (default)" type="is-dark" />
        </b-tooltip>

        <b-tooltip label="Tooltip bottom"
            position="is-bottom">
            <b-button label="Bottom" type="is-dark" />
        </b-tooltip>

        <b-tooltip label="Tooltip left"
            position="is-left">
            <b-button label="Left" type="is-dark" />
        </b-tooltip>

        <b-tooltip label="delayed by 1000ms"
            :delay="1000">
            <b-button label="Delayed" type="is-dark" />
        </b-tooltip>
    </section>
</template>

<style lang="scss" scoped>
.b-tooltips {
    .b-tooltip:not(:last-child) {
        margin-right: .5em
    }
    .b-tooltip {
        margin-bottom: .5em
    }
}
</style>

# Styles

<template>
    <section class="b-tooltips">
        <b-tooltip label="Text is dashed" dashed>
            Simple text
        </b-tooltip>

        <b-tooltip label="Maybe you like a little animation"
            position="is-bottom"
            :animated="false">
            <b-button label="No animation" />
        </b-tooltip>

        <b-tooltip label="You prefer dark?"
            type="is-dark"
            position="is-bottom">
            <b-button label="Dark" />
        </b-tooltip>

        <b-tooltip label="Or light?"
            type="is-light"
            position="is-bottom">
            <b-button label="Light" />
        </b-tooltip>

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

        <b-tooltip label="I'm square"
            position="is-bottom"
            square>
            <b-button label="Square" />
        </b-tooltip>

        <b-tooltip label="You love the light variant, dont you?"
            type="is-primary is-light"
            position="is-bottom">
            <b-button label="Primary light variant" />
        </b-tooltip>
    </section>
</template>

<style lang="scss" scoped>
.b-tooltips {
    .b-tooltip:not(:last-child) {
        margin-right: .5em
    }
    .b-tooltip {
        margin-bottom: .5em
    }
}
</style>

# Custom content

Since0.9.0

Use the content slot for complex content with HTML or components. Note it overrides the label prop.

<template>
    <section class="b-tooltips">
        <b-tooltip position="is-bottom" multilined>
            <b-button label="Html Content" type="is-primary" />
            <template v-slot:content>
                <b>Lorem ipsum dolor sit amet</b>, consectetur warning elit. <i>Fusce id fermentum quam</i>.
            </template>
        </b-tooltip>

        <b-tooltip 
            type="is-light"
            :triggers="['click']"
            :auto-close="['outside', 'escape']">
            <template v-slot:content>
                <b-icon icon="heart" type="is-danger"></b-icon>
                <b-icon icon="thumb-up" type="is-info"></b-icon>
                <b-icon icon="thumb-down" type="is-warning"></b-icon>
                <b-icon icon="emoticon-cool"></b-icon>
            </template>
            <b-button label="Action" type="is-light" />
        </b-tooltip>
    </section>
</template>

<style lang="scss" scoped>
.b-tooltips {
    .b-tooltip:not(:last-child) {
        margin-right: .5em
    }
    .b-tooltip {
        margin-bottom: .5em
    }
}
</style>

# Multilined

Well, it's not always that brief.

<template>
    <section class="b-tooltips">

        <b-tooltip
            label="Tooltip multilined, probably because it's too long for a casual tooltip"
            multilined>
            <b-button label="Multiline (default)" type="is-dark" />
        </b-tooltip>

        <b-tooltip
            label="It's not brief, but it's also not long"
            size="is-small"
            multilined>
            <b-button label="Multiline (small)" type="is-dark" />
        </b-tooltip>

        <b-tooltip
            label="Tooltip large multilined, 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="is-bottom"
            size="is-large"
            multilined>
            <b-button label="Multiline (large)" type="is-dark" />
        </b-tooltip>
    </section>
</template>

<style lang="scss" scoped>
.b-tooltips {
    .b-tooltip:not(:last-child) {
        margin-right: .5em
    }
    .b-tooltip {
        margin-bottom: .5em
    }
}
</style>

# Toggle

<template>
    <section class="b-tooltips">
        <b-button
            label="Toggle"
            type="is-primary"
            @click="active = !active" />
        <hr>

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

        <b-tooltip label="Tooltip right"
            position="is-right"
            :active="active">
            <b-button label="Right" type="is-dark" />
        </b-tooltip>
    </section>
</template>

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

<style lang="scss" scoped>
.b-tooltips {
    .b-tooltip:not(:last-child) {
        margin-right: .5em
    }
    .b-tooltip {
        margin-bottom: .5em
    }
}
</style>

# API

Name	Description	Type	Values	Default
`type`	Type (color) of the tooltip	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	`is-primary`
`active`	Whether tooltip is active or not	Boolean	—	`true`
`auto-close`	The event(s) that should trigger the tooltip to close	Boolean, Array	Boolean `true` or `false`, or an array containing any of `escape`, `outside`, `inside`	`true`
`label`	Tooltip text	String	—	—
`triggers`	Tooltip will be triggered by any events	Array	`click`,`hover`,`focus`,`contextmenu`	`['hover']`
`position`	Tooltip position in relation to the element	String	`is-top`, `is-bottom`, `is-left`, `is-right`	`is-top`
`always`	Tooltip will be always active	Boolean	—	`false`
`animated`	Tooltip will have a little fade animation	Boolean	—	`true`
`square`	Tooltip will be square (not rounded corners)	Boolean	—	`false`
`dashed`	Tooltip slot will have a dashed underline	Boolean	—	`false`
`multilined`	Tooltip will be multilined	Boolean	—	`false`
`size`	Tooltip multiline size (only works for multilined tooltips)	String	`is-small`, `is-medium`, `is-large`	`is-medium`
`delay`	Tooltip delay before it appears (number in ms)	Number	—	`0`
`close-delay`	Tooltip delay before it disappears (number in ms)	Number	—	`0`
`append-to-body`	Append tooltip content to body (prevents event bubbling)	Boolean	—	`false`

Slot name	Description	Props (if scoped)
content	Tooltip Content (HTML or components)	-

Name	Description	Parameters
`open`	Triggers when the tooltip is opened	—
`close`	Triggers when the tooltip is closed	—

# Variables

You can use these variables to customize this component.

Name	Default
`$tooltip-arrow-size`	`5px`
`$tooltip-arrow-margin`	`2px`
`$tooltip-multiline-sizes`	`( small: 180px, medium: 240px, large: 300px )`
`$tooltip-colors`	`$colors`

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub