Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
PeterlitsZo opened this issue Aug 12, 2020 · 3 comments · Fixed by #5677
Closed

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

PeterlitsZo opened this issue Aug 12, 2020 · 3 comments · Fixed by #5677

Comments

@PeterlitsZo
Copy link

PeterlitsZo commented Aug 12, 2020

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>
  1. Hover it, I see a tooltip contain string 'init string'.

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

  3. 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
Copy link
Author

PeterlitsZo commented Aug 12, 2020

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

@Hiws
Copy link
Member

Hiws commented Aug 12, 2020

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
Copy link
Author

PeterlitsZo commented Aug 12, 2020

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?

@jacobmllr95 jacobmllr95 self-assigned this Aug 20, 2020
jacobmllr95 added a commit that referenced this issue Aug 23, 2020
 #5648) (#5677)

* fix(bv-tooltip): hide the tooltip when the title is set to empty

* Update tooltip.spec.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants