floating too tip alignment

[baxinabox]

Is there an existing issue for this?

• [x] I have searched the existing issues and checked the recent builds/commits

What problem are you experiencing?

Please offset the floating tooltip that gives info on a node that is under the mouse cursor. currently the tooltip floats over the values trying to be changed.

example, I try to change seed value and the seed tooltip opens up over the seed value and I cannot see the see value as I scroll it.

Solution: offset the tooltip up or down 1-2 inches

When does this problem occur?

-all nodes with tooltips and toggles

How often do you encounter this problem?

Multiple times per day

How much does this problem affect your workflow?

Significantly slows down my work

Current workarounds

No response

Ideas for solutions (Optional)

Solution: offset the tooltip up or down 1-2 inches

Additional context

No response

┆Issue is synchronized with this Notion page by Unito

[dosubot[bot]]

Hi @baxinabox! I'm Dosu and I’m helping the ComfyUI_frontend team.

There are several existing issues tracking this problem, including #2636 and #6129, both describing tooltips overlapping the values being edited and suggesting a vertical offset as a solution.

Tooltips are implemented using the PrimeVue tooltip directive, and their configuration is centralized in src/renderer/extensions/vueNodes/composables/useNodeTooltips.ts via the createTooltipConfig function. Currently, there is no explicit offset or margin applied—just styling for borders, background, and padding. The tooltip position (top, left, etc.) is set by the v-tooltip directive in Vue components, but the offset is not directly configurable in the tooltip options or via PrimeVue settings.

The most direct way to add a vertical offset is to modify the tooltip's class list in createTooltipConfig to include a Tailwind utility like mt-8 (for margin-top) or -translate-y-8 (for upward translation), depending on the tooltip's position. For example, you could change the class property in the pt.text object to:

class: 'border-node-component-tooltip-border bg-node-component-tooltip-surface border rounded-md px-4 py-2 text-node-component-tooltip text-sm font-normal leading-tight max-w-75 shadow-none mt-8'

or, for a more robust solution that only applies the offset when the tooltip is above the element:

class: cn(
  'border-node-component-tooltip-border bg-node-component-tooltip-surface border rounded-md px-4 py-2 text-node-component-tooltip text-sm font-normal leading-tight max-w-75 shadow-none',
  context.top && 'mt-8'
)

You can adjust the value (mt-8, mt-12, etc.) to achieve the desired offset.

After making this change, test tooltips on nodes and widgets to confirm they no longer obscure the values being edited. If you want a more dynamic or context-aware solution, you could conditionally apply different offsets based on the tooltip's position (top, bottom, etc.) using the context argument in the arrow styling function.

Let me know if you want a more detailed code example or help with a specific tooltip scenario.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

  

[christian-byrne]

@baxinabox thank you, that is a valid point. Can you tell me what version of the frontend you are using (visible in About panel of settings) and whether you have the "Nodes 2.0" enabled?