Toolbars for Edges

[sefaunts]

I need to add toolbars for edges. maybe I click edge or mouseenter to edge. is there any way for that ?
I coded like this, but not work

<template>
  <BezierEdge :source-x="props.sourceX" :source-y="props.sourceY" :target-x="props.targetX" :target-y="props.targetY" :source-position="props.sourcePosition" :target-position="props.targetPosition" />
  <NodeToolbar :is-visible="props.data.toolbarVisible" :position="props.data.toolbarPosition">
    <button v-for="action of actions" :key="action" type="button" :class="{ selected: action === data.action }" @click="updateNodeData(props.id as any, { action })">
      {{ action }}
    </button>
  </NodeToolbar>
</template>

<script setup lang="ts">
import { EdgeProps, BezierEdge, useVueFlow } from '@vue-flow/core'
import { NodeToolbar } from '@vue-flow/node-toolbar';

const props = defineProps<EdgeProps<any>>();

const actions = ['👎', '✋', '👍']
const { updateNodeData, onEdgeMouseEnter } = useVueFlow()

onEdgeMouseEnter((param) => {
  console.log('edge mouseenter', props.id)
})
</script>

[bcakmakoglu]

The NodeToolbar does not work for edges.
It's not meant for that at all.

You can use the EdgeLabelRenderer for that purpose if you want to and render your own "toolbar" in it.
You can find an example here (check the EdgeWithButton.vue).