QTooltip horizontal offset has no effect

[SilPho]

What happened?

When using the offset parameter of a q-tooltip, only the vertical offset seems to have any effect, seemingly no matter which values are used for anchor or self.

What did you expect to happen?

Horizontal and vertical offsets are applied equally.

Reproduction URL

https://jsfiddle.net/pk8vwoyd/

How to reproduce?

1. Add the following to any element:

<q-tooltip :offset="[999, 10]" anchor="bottom left">
    Tooltip contents
</q-tooltip>

2. Observe that the tooltip is offset by 10 pixels vertically, but 0 pixels horizontally, when it should be 999.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome, Firefox

Quasar info output

Relevant log output

Additional context

No response

[github-actions]

Hi @SilPho! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, CodeSandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[SilPho]

(Apparently the bot doesn't like http links, changed it to https)

[arbaev]

I looked into this and traced it through position-engine.js. The horizontal offset isn't actually broken — what you're hitting is the interaction between offset and the viewport-clamping step, made worse by the element the tooltip is anchored to.

Offset doesn't move the final tooltip by N pixels. In getAnchorProps() it expands the anchor element's bounding box, and the direction depends on which edge your anchor names (...left/...right for X, top.../bottom... for Y). The tooltip's self point is aligned to that, and then applyBoundaries() clamps the result so it stays inside the viewport.

The consequence: offset only produces visible movement when the tooltip extends into free space in the offset's direction. If anchor/self push it toward a viewport edge that has no room, the result is clamped and the offset appears to do nothing — and the clamped position is independent of the offset value.

Why your repro shows it

<div style="background:#ccc">     <!-- block element → full width -->
  Hover me
  <q-tooltip :offset="[1000, 50]" anchor="top right">

• The <div> is block-level, so it stretches to the full page width. With anchor="top right" the anchor point is the top-right corner of the viewport. offset[0] pushes it off-screen to the right, and it's clamped straight back — so [0, 50] and [1000, 50] land in the exact same spot. That's the "horizontal offset has no effect".
• The vertical offset does work in your case only because the <div> is full-width but a single line tall, so its top/bottom edges aren't pinned to the viewport and offset[1] has room to move.

(Side note: anchor is the attach point on the target, and self is the point on the tooltip — so anchor="top right" doesn't place the tooltip at the top-right; with the default self="top middle" it overlaps the element. That's a separate source of confusion here.)

Use an inline (or inline-block) trigger so the anchor point sits at the text rather than the screen edge, give it some room, and point anchor/self into open space with a sane offset:

<div style="padding:120px">
  <span style="background:#ccc">
    Hover me
    <q-tooltip anchor="bottom right" self="top left" :offset="[40, 40]">
      Offset down & right
    </q-tooltip>
  </span>
</div>

Toggle the offset between [0, 0] and [40, 40] and you'll see a clean 40px shift on both axes. (1000 is wider than the viewport, so it will always be clamped regardless.)

Suggestion

This is working as intended rather than an offset bug, but it's an easy footgun. It would be worth a short note in the Tooltip/Menu positioning docs along the lines of: offset is applied to the anchor element's box and the result is then clamped to the viewport, so attaching to a full-width/edge element (or pointing toward an edge with no room) will mask the offset. Happy to open a docs PR if that's useful.