Skip to content

[Core] Add relative modifier #1711

@mishushakov

Description

@mishushakov

Hey,
thanks for creating the library

I'm suggesting to add a relative modifier to the library, which let's you align tooltips relative to element from another context
The use-case for this is aligning tooltips within iframes or on canvas (where you know the relative coordinates upfront)

Here's the modifier code:

const relative = {
  name: 'relative',
  fn: ({ x, y, element }) => {
    const rect = element.getBoundingClientRect()
    return {
      x: rect.left + x,
      y: rect.top + y
    }
  }
}

without relative modifier

Screen.Recording.2022-05-22.at.14.16.51.mov

with relative modifier

Screen.Recording.2022-05-22.at.14.17.03.mov

you can already achieve similar functionality by using virtual elements

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureThis would be nice to have.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions