Custom Position Tooltip Without React Child Doesn't work

Hi!

Problem: (Disclaimer: This issue is probably my mistake) but I’ve been using Popper previously for modals and was thinking of having Popper’s Usage without a reference HTMLElement with Tippy that I came across Custom position section of the Tippy docs and I tried it with Tippy.js-React like this:

<Tippy
      content="Hello"
      onCreate={instance => {
        if (instance.popperInstance) {
          instance.popperInstance!.reference = {
            clientHeight: dimensions.height,
            clientWidth: dimensions.width,
            getBoundingClientRect: () => {
              return {
                left: rect.left,
                right: rect.right,
                top: rect.top,
                bottom: rect.bottom,
                height: rect.height,
                width: rect.width
              };
            }
          };
        }
      }}
    >
      <button>Hello</button>
    </Tippy>

It shows up but it is not in its position and it already has a child which is the <button></button>, probably I was expecting something like this:

    <Tippy
      content="Hello"
      onCreate={instance => {
        if (instance.popperInstance) {
          instance.popperInstance!.reference = {
            clientHeight: dimensions.height,
            clientWidth: dimensions.width,
            getBoundingClientRect: () => {
              return {
                left: rect.left,
                right: rect.right,
                top: rect.top,
                bottom: rect.bottom,
                height: rect.height,
                width: rect.width
              };
            }
          };
        }
      }}
    />

But Both Typescript and React don’t like it because they both expect the child in the TIppy Element.

Ways to reproduce: Mentioned in the problem section.

Issue Is there any way I can have Tippy without a React child and be positioned with costum position?

Thanks a lot in advance.

Edit: A word.

[atomiks]

This should work fine in @tippyjs/react v4.0.0-alpha.1 (no dot, it’s a new package entirely), since it doesn’t require a child and you can use the getReferenceClientRect prop 😃

[ilyabo]

Ah, sorry, found getReferenceClientRect now. This works great!