Tengo un componente selector de Vue 2 de color personalizado creado con una combinación de componentes de botón bootstrap-vue y de información sobre herramientas de la siguiente manera:

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

El problema que tengo es determinar cómo poder cerrar la información sobre herramientas haciendo clic fuera del área del selector de color. Probé muchas iteraciones de eventos del mouse (por ejemplo @mouseleave ) en el componente <b-tooltip> , pero no se activan. Los eventos del mouse se activan en el elemento <b-button> , pero no en la información sobre herramientas expandida. Al mirar los documentos del componente de información sobre herramientas, lo único que puedo ver que podría funcionar es border , pero no he tenido suerte allí.

He intentado usar el modificador nativo como tal

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

pero eso no se dispara.

¿Cómo puedo desencadenar un evento en el área de información sobre herramientas que se muestra? Sé qué hacer dentro del evento, simplemente no puedo entender cómo activar los eventos nativos del mouse.