Allow fine-grained control of event handling for interactive option

[totorofly]

Hello,

I'm currently using VueTippy in combination with a rich text editor (Tiptap), and I'm encountering some issues due to the way Tippy handles events when the interactive option is set to true.

As I understand, when interactive is true, Tippy will prevent certain events, including keyboard events, from propagating in order to prevent the tooltip from disappearing when the mouse moves out of it. However, in my use case, I need the tooltips to stay visible when the mouse moves into them (i.e., I need interactive to be true), but I don't want Tippy to block keyboard events.

This is causing issues in my application because it prevents the arrow keys from working properly in the Tiptap editor whenever a Tippy tooltip is visible. Specifically, the keyboard events are blocked and the cursor doesn't move as expected.

I wonder if it would be possible to add finer control over the event handling for the interactive option in Tippy. Specifically, it would be helpful to have separate controls for whether Tippy should prevent mouse events and keyboard events. This would allow users to keep tooltips interactive with mouse movements, while still allowing keyboard events to propagate as needed.

Thank you for your consideration.

[KABBOUCHI]

instead of using interactive, u can use manual trigger https://vue-tippy.netlify.app/props#trigger or set hideOnClick to false

[totorofly]

Here's the part of my Vue component code where the issue is:

<template>
  <node-view-wrapper>
    <tippy
        ref="tippyInstance"
        arrow
        :hide-on-click="false"
        interactive
        placement = 'left'
        theme="sidebar-bubble-toolbar"
        :inertia="true"
    >
      <!-- ... -->

      <template #content>
        <tippy
            arrow
            interactive
            :hide-on-click="false"
            :inertia="true"
            placement = "left"
            theme="sidebar-bubble-toolbar"
            animation="shift-away"
            :duration="[450, 250]"
            :onMount = "handleHoverStart"
            :onUntrigger = "handleHoverEnd"
        >
          <!-- ... -->

          <template #content>
            <side-tool-bar
                v-show = "isHovered"
                :hide-button-list="['history','bold','italic','underline','strike']"
                 style="border: 0px solid blue;padding: 0;"
                 :editor="editor"
                 :posFrom="posFrom"
                 :nodeViewProps="props"
                 :categoryOrder="['heading','text-align','mark']"/>
          </template>
        </tippy>
      </template>
    </tippy>
  </node-view-wrapper>
</template>

This is a screenshot showing the behavior before modification:

I tried removing the interactive attribute from the first tippy component, and changed the trigger to 'mouseenter focus'. This is how it looks after the modification: