[Core] Add `relative` modifier

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

https://user-images.githubusercontent.com/10400064/169694677-a8c88c8e-f263-47f7-9327-d2311df8731d.mov

with relative modifier

https://user-images.githubusercontent.com/10400064/169694680-fa4b3cb5-36ca-4f42-aaa8-bf0064b27a7f.mov

you can already achieve similar functionality by using virtual elements

[talldan]

Just thought I’d mention that the project I work on had a very similar custom middleware solution for offsetting an iframe to the one shown in the issue description.

A problem I encountered is that custom middleware that provides an offset doesn’t seem compatible with floating ui’s shift middleware (when used with limitShift). That seems to expect any offsets to be provided through middleware data: https://github.com/floating-ui/floating-ui/blob/77c4b27a8096cafe06e58b2c7592317d6d3a3aea/packages/core/src/middleware/shift.ts#L203-L212

[talldan]

I see. My mistake is that I didn’t realise that some middleware (like flip) has a different definition of main/cross axis. Flip is the definition I saw first and I ran with that. 🤦

I was finding it a bit confusing, but now it makes a lot more sense. Thanks for clarifying.