Estoy usando React Popper para posicionar un elemento en relación con otro. He configurado un código básico para proporcionar la estructura inicial.

 export default function App() { const [containerRef, setContainerRef] = useState(null); const [tooltipRef, setTooltipRef] = useState(null); const { styles: { popper }, attributes: { popper: popperAttributes } } = usePopper(containerRef, tooltipRef, { placement: "bottom-start" }); return ( <> <div className="container" ref={setContainerRef}> Content </div> <span ref={setTooltipRef} className="tooltip" style={{ ...popper }} {...popperAttributes} > Tooltip </span> </> ); }

También he agregado algunos estilos, solo para ver los elementos.

 .container { display: flex; align-items: center; padding: 0 20px; background-color: rgb(255, 121, 121); height: 30px; border: 1px solid #000; } .tooltip { width: 100%; background-color: #333; width: 100%; color: #fff; }

Bien, como puede ver, el contenedor tiene un color de fondo rojizo. Sin embargo, lo que quiero es que, si la información sobre herramientas se coloca en la parte superior, quiero que el fondo del contenedor sea amarillo. ¿Es eso posible en React Popper?

Aquí está el código completo. https://codesandbox.io/s/sad-cartwright-r6oyrb