Multi tool use

Add or remove tooltip in Vuejs using Bootsrap vue

I have wirte a line code usse v-b-tooltip of Bootstrap Vue. However I only want to have tooltip in some condition. How can I set condition to have tooltip or not.

<b-btn v-b-tooltip="'Tooltip'">


2 Answers
2

One possible way to disable tooltip is to have a "b-tooltip" element. Something like this:

<b-btn id="my-button">OK</b-btn>
<b-tooltip :disabled.sync="disableTooltip" target="my-button">Tooltip</b-tooltip>

<b-btn @click="disableTooltip = !disableTooltip">Enable / Disable Tooltip</b-btn>


Make sure you have the "disableTooltip" property in your data object.

More information:

https://bootstrap-vue.js.org/docs/components/tooltip/#programmatically-disabling-tooltip

Disabling and enabling tooltips via $root events
You can disable all open tooltips by emitting the bv::disable::tooltip event on $root:

this.$root.$emit('bv::disable::tooltip');

this.$root.$emit('bv::disable::tooltip');

To disable a specific tooltip, pass the trigger element's id as the first argument:

this.$root.$emit('bv::disable::tooltip', 'my-trigger-button-id');

this.$root.$emit('bv::disable::tooltip', 'my-trigger-button-id');

Here the Doc with more examples

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.