Tooltips on handles

[tandrew]

Apologies in case this has already been addressed. I could not find anything about this topic, however.

I am trying to have tooltips on handles, i.e. when hovering over a handle i would like display some information about it (e.g. the id, a label, the type etc.). I could not find a working way to add tooltips to handles (using tooltip packages, CSS). I would appreciate if someone could shed some light on how to achieve this. At best, with a working example.

Thanks!

[bcakmakoglu]

I could not find a working way to add tooltips to handles (using tooltip packages, CSS)

What did you try? Any reproduction of anything you've tried to see why it didn't work or if you've possibly made mistakes?
There's no secret sauce to this. Handles are just <div> elements. You can add tooltips to them just as you would any other div element so I'm not sure what you tried or why it didn't work hence me asking for some examples of what you've tried.

[bcakmakoglu]

Here's a very basic example.

[tandrew]

Hey, thanks for the prompt answer and the attached example. That did the trick. Sorry for not providing an example but your answer was sufficient for me to compare that to my code. The main culprit in my case was that the handles connectable property was set to false. In that case both mouseenter and mouseleave will not fire and the tooltip will not display.

So thanks again, and I will provide better information in case I need help in the future.

To add some value for others, here is the code from my current prototype. It will provide balloon tooltips offset to the top, bottom, left, right depending on the side of the handle (disregard the colors and layout ... it's just for proof-of-concept work atm).

<script setup lang="ts">
import { Handle } from '@vue-flow/core'
import type { TNodeData } from 'components/VueFlow/classes/TNodeData'
import { onMounted } from 'vue'
import { ref } from 'vue'

// --- PROPS ---------------------------------------------------------------------
const props = defineProps<{
  data: TNodeData
}>()

const showTooltipPortId = ref('')

// --- HOOKS ---------------------------------------------------------------------
onMounted(() => {
  console.log('Node Data:', props.data)
})

// --- METHODS -------------------------------------------------------------------

function onMouseEnter(portId: string) {
  showTooltipPortId.value = portId
}

function onMouseLeave(portId: string) {
  showTooltipPortId.value = ''
}
</script>

<!-- ----------------------------------------------------------------------------- -->

<template>
  <div class="q-pa-md">

    <div>Label:{{ data.label }}</div>
    <div>Layout:{{ data.orientation }}</div>

    <template v-for="port in data?.ports" :key="port.id">
      <Handle
        :id="port.id"
        :type="port.type"
        :position="port.position"
        :connectable="true"
        :connectable-start="port.connectableStart"
        :connectable-end="port.connectableEnd"
        :style="
          data.orientation === 'vertical'
            ? { left: port.offsetPosition.x + 'px' }
            : { top: port.offsetPosition.y + 'px' }
        "
        @mouseenter="onMouseEnter(port.id)"
        @mouseleave="onMouseLeave(port.id)"
      >
        <div v-if="showTooltipPortId === port.id" class="tooltip" :data-position="port.position">
          {{ port.label }}
        </div>
      </Handle>

    </template>
  </div>
</template>

<style>
.vue-flow__node-standard {
  border: 1px solid #777;
  padding: 10px;
  border-radius: 10px;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  max-width: 250px;
  position: relative;
}

.vue-flow__node-standard .vue-flow__handle {
  background-color: #ff5720;
  border-radius: 0;
  border: none;
}

/* Position handles outside the node and set specific border radiuses */
.vue-flow__node-standard .vue-flow__handle-top,
.vue-flow__node-standard .vue-flow__handle-bottom {
  height: 6px; /* Half height for top/bottom handles */
  width: 12px;
  border-radius: 4px 4px 0 0;
}

.vue-flow__node-standard .vue-flow__handle-left,
.vue-flow__node-standard .vue-flow__handle-right {
  height: 12px;
  width: 6px; /* Half width for left/right handles */
  border-radius: 4px 0 0 4px;
}

.vue-flow__node-standard .vue-flow__handle-top {
  top: -3px;
  border-radius: 4px 4px 0 0;
}

.vue-flow__node-standard .vue-flow__handle-bottom {
  bottom: -3px;
  border-radius: 0 0 4px 4px;
}

.vue-flow__node-standard .vue-flow__handle-left {
  left: -3px;
  border-radius: 4px 0 0 4px;
}

.vue-flow__node-standard .vue-flow__handle-right {
  right: -3px;
  border-radius: 0 4px 4px 0;
}

.tooltip {
  position: absolute;
  font-size: 12px;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  border: none;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Update triangle colors for dark theme */
.tooltip::after {
  content: '';
  position: absolute;
  border: 4px solid transparent; /* Made smaller to match image */
}

.tooltip[data-position='top'] {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}
.tooltip[data-position='top']::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #333;
}

.tooltip[data-position='bottom'] {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}
.tooltip[data-position='bottom']::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: #333;
}

.tooltip[data-position='left'] {
  right: 100%;
  top: 50%;
  transform: translateX(-4px) translateY(-50%);
}
.tooltip[data-position='left']::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: #333;
}

.tooltip[data-position='right'] {
  left: 100%;
  top: 50%;
  transform: translateX(4px) translateY(-50%);
}
.tooltip[data-position='right']::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: #333;
}
</style>

Example output: