Feature Request: useTooltip() support for focus/blur events

[TheTedAdams]

Apologies if there is an easy way to do this that I'm missing, but I would like my tooltips to show when the target is focused. For example, I like to do this on IconButton's (A button that just has an Icon and an aria-label) so that when the user hovers over the IconButton or tabs to it, they get a helpful tooltip. useTooltip makes supporting hover very easy (since it uses useHover), but I'd love to support both hover and focus.

[TheTedAdams]

Just as a reference, Tippy.js exposes this via a Trigger option: From their docs

[everweij]

Hi @TheTedAdams , Sorry for the super late response. I know it's been a year since you openen this issue, but I hope I can help you nonetheless. V2 brings a lot more flexibility when it comes you controlling when to show or hide the layer. Here's an example: https://storybook.react-laag.com/?path=/docs/password-validation--page

In essence:

function Example() {
  const [isOpen, setOpen] = React.useState(false);

  const { triggerProps, layerProps, renderLayer } = useLayer({
    isOpen,
  });

  return (
    <>
      <input
        onFocus={() => setOpen(true)}
        onBlur={() => setOpen(false)}
        {...triggerProps}
      />
      {isOpen && renderLayer(<div {...layerProps}>Layer!</div>)}
    </>
  );
}

Hopefully this answers your question

I will close this issue for now. Feel free to re-open this issue if things are not clear enough, or open a new one if you run into other issues.