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