useLinkHover

Tracks the hover state all links in the editor. Can be combined with <EditorTooltip> to show a tooltip when hovering over a link.

Usage

<script setup lang="ts">
const editor = useEditor(/* options */)
const { isHovered, reference, to } = useLinkHover(editor, {
  delay: 100,
})
</script>

<template>
  <EditorTooltip
    v-model:open="isHovered"
    :position="reference"
    :editor="editor"
  >
    <div>
      {{ to }}
    </div>
  </EditorTooltip>
</template>

Options

delay

The delay in milliseconds before the hover state is shown.

immediatelyClose

By default, useLinkHover is not responsible for closing the hover state. This allows features like Tooltips, to be used in combination with useLinkHover.

If you want isHovered to be false immediately when the mouse is moved out of the hovered a element, you can set immediatelyClose to true. This means that if the hover state is used to show a tooltip, the tooltip cannot be interacted with.