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

Simple text
I'm never closing
<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


I'm never closing
<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
typeType (color) of the tooltipStringis-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 Sassis-primary
activeWhether tooltip is active or notBooleantrue
labelTooltip textString
triggersTooltip will be triggered by any eventsArrayclick,hover,focus,contextmenu['hover']
positionTooltip position in relation to the elementStringis-top, is-bottom, is-left, is-rightis-top
alwaysTooltip will be always activeBooleanfalse
animatedTooltip will have a little fade animationBooleantrue
squareTooltip will be square (not rounded corners)Booleanfalse
dashedTooltip slot will have a dashed underlineBooleanfalse
multilinedTooltip will be multilinedBooleanfalse
sizeTooltip multiline size (only works for multilined tooltips)Stringis-small, is-medium, is-largeis-medium
delayTooltip delay before it appears (number in ms)Number0

# Variables

You can use these variables to customize this component.

Name
Default
$tooltip-arrow-size5px
$tooltip-arrow-margin2px
$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