[Tooltip] the binding string is empty string but itself still displays.

[PeterlitsZo]

Describe the bug

After click, I set the title to empty string. I want to make the tooltip do not display but it still display a very small black rectangle.

Because I can see the tooltip only when i hover the buttom, so I try to move over and then move back -- now it work as I think.

So here is the question/bug: why at first when the value be empty, the tooltip still display (but small alright), and after I unhover and hover again it do not display as I want?

By the way, I like the emoji: 🐛 , it looks cute.

Steps to reproduce the bug

1. Go to set the b-buttom:

<template>
  <div>
    <b-button v-b-tooltip.hover.bottom :title="btn.title" @click="() => {btn.title = ''}">
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    btn: {title: "init string"}
  }
}
</script>

2. Hover it, I see a tooltip contain string 'init string'.

3. Click it, I see a tooltip contain nothing but it still display. (just a smell black rentangle).

4. Unhover it and hover back, it does not display now. (this is what i want at step 3).

Expected behavior

Please see step 4 of the subsesstion Steps to reproduce the bug.

Versions

Libraries:

(I do not know where it is, this is my package.json.

• BootstrapVue: <???>
• Bootstrap: ^5.0.0-alpha1
• Vue: ^2.6.11

Environment:

• Device: Mi Laptap
• OS: Windows 10
• Browser: Chrome
• Version: <???>

Demo link

Link: CodeSandBox

[PeterlitsZo]

I try to view source file to help meself, but I am so green with Javascript ...

[Hiws]

Sounds like a bug, but you can workaround this by manually hiding the tooltip.

If you want to disable a tooltip, you can also utilize the disabled prop, instead of setting the title to empty.
https://bootstrap-vue.org/docs/components/tooltip#programmatically-disabling-tooltip
https://bootstrap-vue.org/docs/components/tooltip#disabling-and-enabling-tooltips-via-root-events

<b-button v-b-tooltip.hover.bottom="{ id: 'my-tooltip' }" :title="title" @click="hideTooltip('my-tooltip')">
  Button
</b-button>

{
  data() {
    return {
      title: "Some text"
    };
  },
  methods: {
    hideTooltip(id) {
      this.$root.$emit("bv::hide::tooltip", id);
      this.title = "";
    }
  }
}

https://codepen.io/Hiws/pen/wvGKQVo

[PeterlitsZo]

I deal it with close + disable but not change its value anymore. It works well as I think. But if I can just change the value it looks better and more easy for me.

Thanks for your advice, so will you fix it?