0

I'm trying to 'pair' tooltips on sibling components, so that if one sibling's tooltip is triggered, then the other sibling's is, too.

I'm using pure CSS for the tooltip. In an attempt to popup the tooltip on the sibling, I dispatch a mouseenter event via a ref:

const MyComponent = ({ id, stuff, ttText, sibling }) => {
    const hoover = (on) => {
        sibling.current.dispatchEvent(new Event('mouseenter'))
    }
    const myRef = useRef(null)
    return <span ref={myRef} style={{ color: 'red' }} data-tooltip={ttText} id={id} 
        onMouseEnter={()=>hoover(true)}>{stuff}&nbsp;</span>
}

No errors on the dispatch call, but no tooltip pops up on the sibling. Is there something obviously wrong here, or is this approach just too naive?*

  • One of the reasons I'm trying to trigger via event dispatch is that the tooltips are pure CSS, meaning that there is no separate component to display (the tooltip is constructed via CSS, relying on the target element's data-tooltip attribute for content)
Jeff Lowery
  • 2,492
  • 2
  • 32
  • 40
  • 1
    Does this answer your question? [How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?](https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover) – RubenSmn May 02 '23 at 17:13
  • @RubenSmn, not really, though informative. One of the reasons I'm trying to trigger via event dispatch is that the tooltips are pure CSS, meaning that there is no separate component to display (the tooltip is constructed via CSS, relying on the target element's `data-tooltip` attribute for content). I could use a child component for the tooltip and hide/display it using useState(), but it's a bit more complicated code-wise. (also, the link mentions `mouseover` instead of `mouseenter`. I tried both. – Jeff Lowery May 02 '23 at 17:38

0 Answers0