gilbarbara / react-floater

Advanced tooltips for React
https://codesandbox.io/s/github/gilbarbara/react-floater/tree/main/demo
MIT License
220 stars 37 forks source link

Allow user to manually set the offset of the arrow #38

Closed mrstebo closed 6 years ago

mrstebo commented 6 years ago

This is based on #37 where I discussed what my use case for this was.

The way this works is by adding an additional option for the arrow styles. So at the moment we have:

  arrow: {
    color: '#fff',
    display: 'inline-flex',
    length: 16,
    position: 'absolute',
    spread: 32,
  }

This PR will change this to be:

  arrow: {
    color: '#fff',
    display: 'inline-flex',
    length: 16,
    position: 'absolute',
    spread: 32,
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
  }

Below is the how it looks now.

screen shot 2018-08-09 at 09 08 00

And now when I set left to -100.

screen shot 2018-08-09 at 09 13 53
gilbarbara commented 6 years ago

As I said in the issue, positioning is handled by popper.js and you could set a custom modifier function to change it.

salman-ar-sar commented 3 years ago

Please add this feature. Manually overriding modifier function is too tedious for something this simple.