Keep tooltip open while hovering over tooltip (rather than closing when leaving trigger)

Is your feature request related to a problem? Please describe. I’ve created a navigation sidebar that, when you hover over the icon, displays a tooltip with the label for that route. I’ve got the tooltip working well, but on user testing, some of my users are trying to click on the tooltip rather than the icon.

Because I’m using useHover [const [isOpen, hoverProps] = useHover({ delayEnter: 100, delayLeave: 200 });] the tooltip closes as the user mouseLeave’s off the triggering element and tries to click the tooltip.

Describe the solution you’d like Some way/logic to stop the delayLeave from triggering if the tooltip is hovered as well. Basically if the element or tooltip is hovered then keep the tooltip open, otherwise trigger delayLeave.

Describe alternatives you’ve considered Currently I’m bumping up the delayLeave number to e.g. 500 to keep the tooltip open for longer, but this doesn’t look that great from a UX perspective.

[everweij]

Thanks for submitting this issue!

What I generally do, and here’s an example, is to not only spread the hoverProps on the trigger-element, but also on the layer-element itself. So, from the perspective of useHover() it doesn’t matter where the ‘signals’ (enter/leave) originated from, so you could attach the hoverProps (onMouseEnter / onMouseLeave) to any elements you’d like.

// minimal example

function Example() {
  const [isOver, hoverProps] = useHover({ delayLeave: 100 });
  
    const { renderLayer, triggerProps, layerProps } = useLayer({
        isOpen: isOver
    });

    return (
        <>
            {isOver &&
                renderLayer(
                    <div {...layerProps} {...hoverProps}>
                        Layer!
                    </div>
                )}
            <button {...triggerProps} {...hoverProps}>
                Trigger!
            </button>
        </>
    );
}

Does this help / answers your question?

[Gofilord]

@everweij The problem with this, is this can’t be done if I want the trigger to be click and not hover. I am now facing an issue where I nee the tooltip to support both click and hover, and I find it very troubling (if I were to do this, the click inside the tooltip will close it).