In this article, we look at how to use the v-b-tooltip directive to add tooltips.
Tooltips
We can add tooltips with the v-b-tooltip directive.
For example, we can write:
<template>
<div id="app">
<b-button v-b-tooltip.hover title="Tooltip">Hover Me</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have the v-b-tooltip directive on our button.
title has the content of the tooltip.
The hover modifier makes the tooltip open on hover.
A tooltip on a disabled element must be triggered by its wrapper element.
Positioning
We can change the position that the tooltip is displayed with modifiers.
For example, we can write:
<template>
<div id="app">
<b-button v-b-tooltip.hover.bottomright title="Tooltip">Hover Me</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have the bottomright modifier to display the tooltip on the bottom right.
Other possible choices include top, topleft, topright, right, righttop, rightbottom, bottom, bottomleft, bottomright, left, lefttop, and leftbottom .
Triggers
We can change how the tooltip is triggered by some modifiers.
We can have no modifier, which means it’s opened when an element is hovered or focused.
hover means the tooltip opens on hover.
click means the tooltip opens on click.
focus means the tooltip opens on focus.
We can write:
<template>
<div id="app">
<b-button v-b-tooltip.click title="Tooltip">Hover Me</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Now the tooltip opens on click because of the click modifier.
Disabled Elements
We have to trigger the tooltip on a wrapper if we want to open a tooltip on a disabled element.
For example, we can write:
<template>
<div id="app">
<span v-b-tooltip title="Disabled tooltip">
<b-button variant="primary" disabled>Disabled</b-button>
</span>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We put the v-b-tooltip on the span instead of the disabled button.
The result is still having the tooltip disabled on hover or focus.
Focus and Button
Since b-button is rendered as a tag if we add the focus trigger.
We need to add the tabindex='0' attribute.
For instance, we can write:
<template>
<div id="app">
<b-button href="#" tabindex="0" v-b-tooltip.focus title="Tooltip">Link</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Dismiss on Next Click
We need to add the click and blur modifiers to add a tooltip that only opens when the element is clicked and closed when anything in the document is clicked or receives focus.
For example, we write:
<template>
<div id="app">
<b-button v-b-tooltip.click.blur title="Tooltip">Link</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Title
We can set the value of the v-b-tooltip directive to an object to set the options for the tooltip.
The object can have the title property to set the title.
For example, we can write:
<template>
<div id="app">
<b-button v-b-tooltip="options">Link</b-button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
options: {
title: "hello <strong>world</strong>",
html: true
}
};
}
};
</script>
We have the title property with some HTML inside.
html is set to true so that the HTML is rendered.
Variants
To change the style, we can add the variant property to the object.
For example, we can write:
<template>
<div id="app">
<b-button v-b-tooltip="options">Link</b-button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
options: {
title: "hello <strong>world</strong>",
html: true,
variant: "info"
}
};
}
};
</script>
Then variant is 'info' , so the background will be green.
Other possible values include, 'primary' , 'secondary' , 'warning' , 'success' , etc.
Make the Tooltip Non-Interactive
We can make a tooltip non-interactive with the noninteractive prop.
Hiding and Showing Tooltips via $root Events
To show a tooltip, we can write:
this.$root.$emit('bv::show::tooltip', 'trigger-button-id')
to show a tooltip that’s added to the element with ID trigger-button-id .
To hide all tooltips, we can write:
this.$root.$emit('bv::hide::tooltip')
this is the component.
Disabling and Enabling Tooltips via $root Events
We can disable all tooltips by writing:
this.$root.$emit('bv::disable::tooltip')
to disable a tooltip by element ID, we can write:
this.$root.$emit('bv::disable::tooltip', 'trigger-button-id')
and to enable a tooltip by ID, we can write:
this.$root.$emit('bv::enable::tooltip', 'trigger-button-id')
Conclusion
We can add a tooltip to an element with the v-b-tooltip directive.
The content can be plain text or HTML.
