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
auto-closeThe event(s) that should trigger the tooltip to closeBoolean, ArrayBoolean true or false, or an array containing any of escape, outside, insidetrue
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
close-delayTooltip delay before it disappears (number in ms)Number0
append-to-bodyAppend tooltip content to body (prevents event bubbling)Booleanfalse

# 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