如何使用mouseleave事件关闭Bootstrap-Vue Tooltip

Question

我有一个使用 bootstrap-vue button and tooltip 组件组合创建的自定义颜色 Vue 2 选择器组件，如下所示：

<template>
    <div>
        <b-button
            ref="button"
            @click="openColors"
            variant="outline-secondary"
            pill
            dusk="tag-colorpicker-button"
            :class="showColorPickerError ? 'button-border' : ''"
        >
            <i :style="{color: color}" class="icon-gt icon-gt-circle"></i>
            <i class="icon-gt icon-gt-angle-down"></i>
        </b-button>
        <div id="tooltip-boundary">
            <b-tooltip
                boundary="window"
                :show.sync="show"
                :target="() => $refs['button']"
                triggers="manual"
                custom-class="colorpicker-tooltip"
                placement="bottom"       
            >
                <compact v-model="color"></compact>
            </b-tooltip>
        </div>

    </div>
</template>

我遇到的问题是确定如何通过在颜色选择器区域外单击来关闭工具提示。我在 <b-tooltip> 组件上尝试了多次鼠标事件迭代（例如 @mouseleave），但它们没有被触发。鼠标事件在 <b-button> 元素上触发，但不会在展开的工具提示上触发。在查看工具提示组件文档时，我唯一能看到的可能有用的是 border，但我在那里没有运气。

我试过像这样使用 `native 修饰符

<b-tooltip
    :show.sync="show"
    :target="() => $refs['button']"
    triggers="manual"
    custom-class="colorpicker-tooltip"
    placement="bottom"
    @mouseleave.native="myMethod"
>

但这并没有触发。

如何在显示的工具提示区域触发事件？我知道在事件中做什么，我只是不知道如何触发本机鼠标事件。

Answer 1

代替trigger="manual"，做trigger="click blur":

click - 单击目标时切换工具提示。
blur - 工具提示模糊时关闭（即失去焦点）。

demo

如何使用mouseleave事件关闭Bootstrap-Vue Tooltip

How to use mouseleave event to close Bootstrap-Vue Tooltip

javascript

mouseevent

vue.js

vuejs2

bootstrap-vue