Rendering an arrow and stying, with referenceElement

[doneumark]

Steps to reproduce the problem

1. I'm trying to reproduce a tooltip-like behavior, with a referenceElement. My code is the following:

<Popper
    referenceElement={element}
    placement='right'
>
    {({ ref, style, placement, arrowProps }) => (
        <div ref={ref} style={style} data-placement={placement}>
            Popper element
            <div ref={arrowProps.ref} style={arrowProps.style} />
        </div>
    )}
</Popper>

2. In the page, the "tooltip" is on the right from the DOM element, but with no arrow.
3. If I would like the arrow to be shown and be pointed to the element at all placement he get, and also style the "tooltip" itself, how can I do that?

What is the expected behavior?
Tooltip should show an arrow beside him.

What went wrong?
He doesn't.

Packages versions
react-popper: 1.0.2

Code
https://codesandbox.io/s/r0lrlk54qp

[FezVrasta]

Sorry I really need the codepen/codesandbox repro, otherwise I can't help you.

[doneumark]

Added: https://codesandbox.io/s/r0lrlk54qp

[FezVrasta]

You have to style your arrow to make it visible somehow. Take a look at the demo page to see an example.

https://codesandbox.io/s/qkzk25lj8j

[doneumark]

So to style its position for the tooltip I need to condition-style the arrow?

[doneumark]

Meaning the direction the arrow is pointing at.

[FezVrasta]

react-popper only provides the left or top offset of the arrow, all the styling is deferred to the consumer.

[doneumark]

And is there a way to use the already made Arrow component so I wouldn't have to handle the direction the arrow is pointing?
Or that if I want to use the 'referenceElement' prop, I have to manually design and implement the arrow myself?

[FezVrasta]

You can copy the one of the demo, but the library doesn't provide any style except for the positions.