Enhance inline reference element support

[Justineo]

It will be nice if popper has Tooltipster-like inline element support. See here.

[FezVrasta]

This is pretty nice!

[FezVrasta]

Related: #193 (comment)

[FezVrasta]

This could be achieved with a custom modifier that takes the width of the text block on the 4 edges and then centers the popper accordingly... (I think).

In practice you would end up with:

{
  top: { start: 0, end: 200, width: 100 },
  right: { start: 0, end: 10, width: 10 },
  bottom: { start: 0, end: 100, width: 100 }
  left: { start: 0, end: 20, width: 20 }
}

To describe:

Where the grey borders are the valid edges where the popper could get anchored

[FezVrasta]

Closing, feel free to implement it as a custom modifier if you need it.

[Narretz]

Hi @FezVrasta could you give me a hint on how this modifier would work? Which modifier would it replace in calculating the position? And could it be implemented so that it works together with the built-in modifiers like shift, preventOverflow etc?

Personally, I think this is a very useful feature, but I assume the complexity would add quite a bit to the core. I think it makes sense as a custom modifier, but I think some more input from you could definitely speed up the process in creating this.

[FezVrasta]

I think it could run as first modifier of the list, doing so all the others will be able to work properly

[josephrocca]

Current behaviour is definitely counter-intuitive: https://jsbin.com/kulefoduvo/2/edit?html,output That tooltipster approach looks neat!

[atomiks]

Here's my current solution for this, using .getClientRects(). (Edit: solved the line-height caveat)

https://codepen.io/atomiks/pen/GeBoyW?editors=0010

How would you guys do it?

[atomiks]

^ So that behavior is a bit different to the tooltipster one. But it's also useful in cases of interactivity, by making it appear at the rect where the cursor landed.

For the tooltipster case, here's what I came up with: based on the current placement, it will choose the correct rect(s) and "sums" the rects on a particular side.

https://codepen.io/atomiks/pen/jjqbjy

I think the summing behavior also needs to be applied to the CodePen in the above comment as well, since the tooltip can overlap a line when it's not split as in the demo.