import React, {useState, useEffect, useRef} from 'react';
import Tippy from '../Tippy';
import styled from '@emotion/styled';

const PositioningTarget = styled.span`
  background: tomato;
  color: white;
  padding: 4px 8px;
`;

function TriggerTarget() {
  const [mounted, setMounted] = useState(false);
  const ref = useRef();

  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <div ref={ref} style={{marginBottom: 8}}>
      Trigger target vs{' '}
      {mounted && (
        <Tippy triggerTarget={ref.current}>
          <PositioningTarget>positioning target</PositioningTarget>
        </Tippy>
      )}
    </div>
  );
}

export default TriggerTarget;

@@ -398,18 +398,8 @@
 %3Cdiv
- ref=%7Bref%7D
  sty
@@ -428,16 +428,32 @@
 %3E%0A      
+%3Cspan ref=%7Bref%7D%3E
 Trigger 
@@ -458,16 +458,23 @@
 r target
+%3C/span%3E
  vs%7B' '%7D

fix trigger target example