Tooltip reopen after selecting a dropdown item
Author: trangnphuynhCreated Jun 18, 2025Updated Jun 18, 2025
Describe the bug
Tooltip reopens immediately after selecting a , causing a flickering tooltip effect even though the dropdown has been closed. Even though using hover only.
Steps to reproduce the bug
Go to a component using with v-b-tooltip.hover.top applied to the button and dropdown items.
Hover over the dropdown toggle and open the dropdown.
Hover over one of the dropdown items (with tooltip), and click to select it.
See that the tooltip quickly reappears on the selected item before disappearing.
Expected behavior
Once a dropdown item is selected and the dropdown closes, the tooltip should not reopen or flicker briefly. It should remain hidden unless explicitly triggered again.
Versions
Libraries:
BootstrapVue: 2.23.1
Bootstrap: 4.6.2
Vue: 2.6.14
Environment:
- Device: [e.g. Mac or iPhone X]
- OS: [e.g. macOS Mojave or iOS 12]
- Browser: [e.g. Chrome]
- Version: [e.g. 70]
Demo link
<b-dropdown
v-model="question.doStatementUid"
class="dropdown-form-control"
menu-class="dropdown-form-control-menu"
:state="state"
required
block
>
<template #button-content>
<span
v-b-tooltip.hover="{ title: getSelectedDoStatement(question)?.content }"
class="dropdown-text-content"
>
{{ getSelectedDoStatement(question)?.content }}
</span>
<span class="dropdown-icon-fixed">
<Remixicon
class="label-icon"
name="ri-arrow-down-s-line"
tabindex="0"
/>
</span>
</template>
<b-dropdown-item
v-for="doStatement in doStatements[element.elementUid]"
:key="doStatement.doStatementUid"
**v-b-tooltip.hover="{ title: doStatement.content }"**
:value="doStatement.doStatementUid"
class="custom-dropdown-item"
@click="question.doStatementUid = doStatement.doStatementUid"
>
{{ doStatement.content }}
</b-dropdown-item>
</b-dropdown>Source: bootstrap-vue/bootstrap-vue