I've developed a custom color picker component in Vue 2 using a combination of bootstrap-vue's button and tooltip components as shown below:
<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>
https://i.sstatic.net/bBoLC.png
The challenge I'm facing is figuring out how to close the tooltip by clicking outside the color picker area. I've attempted various mouse event iterations (e.g. @mouseleave) on the <b-tooltip> component, but they are not being triggered. The mouse events work on the <b-button> element, but not on the expanded tooltip. From reviewing the tooltip component documentation, the only potential solution appears to be using border, but so far it hasn't worked.
I also tried using the `native modifier approach like this
<b-tooltip
:show.sync="show"
:target="() => $refs['button']"
triggers="manual"
custom-class="colorpicker-tooltip"
placement="bottom"
@mouseleave.native="myMethod"
>
but unfortunately, that doesn't get triggered either.
How can I successfully trigger an event on the displayed tooltip area? I know what needs to be done within the event, but I'm struggling to activate the native mouse events.