Tooltip

v-b-tooltip is a predefined directive of BootstrapVueNext.

Basic examples

We can specify where to place the tooltip with the left, right, bottom and top modifiers. If we do not define any modifier, the placement will be "top".

							
                                
<template>
    <BButton variant="secondary" v-b-tooltip.top="'Tooltip on top'">
        Tooltip on top
    </BButton>
    <BButton variant="secondary" v-b-tooltip.right="'Tooltip on right'">
        Tooltip on right
    </BButton>
    <BButton variant="secondary" v-b-tooltip.bottom="'Tooltip on bottom'">
        Tooltip on bottom
    </BButton>
    <BButton variant="secondary" v-b-tooltip.left="'Tooltip on left'">
        Tooltip on left
    </BButton>
    <BButton variant="secondary" v-b-tooltip="'<em>Tooltip</em> <u>with</u> <b>HTML</b>'">
        Tooltip with HTML
    </BButton>
    <BButton variant="link" v-b-tooltip="'<em>Tooltip</em> <u>on</u> <b>Link</b>'">
        Tooltip on Link
    </BButton>
</template>

Disabled elements

Elements with the disabled attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0".

							
                                
<template>
    <span
        class="d-inline-block"
        tabindex="0"
        v-b-tooltip="'Disabled tooltip'" 
    >
        <BButton variant="primary" disabled>
            Disabled button
        </BButton>
    </span>
</template>

Basic examples
Disabled elements