I have a custom color Vue 2 picker component created using a combination of bootstrap-vue button and tooltip components like so:

<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>

The issue I'm having is determining how to be able to close the tooltip either by clicking outside of the color picker area. I've tried many iterations of mouse events (e.g. @mouseleave) on the <b-tooltip> component, but they are not triggered. The mouse events are triggered on the <b-button> element, but not the expanded tooltip. In looking at the tooltip component docs, the only thing I can see that might work is border, but I have had no luck there.

I have tried using the `native modifier like so

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

but that is not triggered.

How can I trigger an event on the displayed tooltip area? I know what to do within the event, I just can't figure how to get the native mouse events to be triggered.