I have buttons that are close to each other that when the tooltip pops out it would block the other buttons out, here's a picture of the said problem:
If I hover the request button below the other one and then tries to hover the button above it, I will end up hovering on the tooltip instead of the button below it.
I can hide the tooltip on hover (see code below) using CSS but it produces a flickering effect when I hover to the next button then ends up not showing the tooltip on that specific next button.
.tooltip:hover {
display: none;
}
So my questions would be:
bootstrap-vue
that would only show the tooltip when hovered on the button itself;You can use the noninteractive
modifier on the directive. (or prop if you're using the component)
This will make it so the tooltip can't be interacted with, so hovering the tooltip wont keep it visible.
new Vue({
el: "#app"
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<div id="app" class="p-5">
<b-button v-b-tooltip.noninteractive.hover title="Try and hover me!">
Hover me
</b-button>
</div>