Create a React Tooltip component using Popover API

#html #react #javascript

Since April 2024, Popover API works major browsers on their latest versions. This API allows developers to display popover content on top of other page content.

Code

For this small snippet, I've used JS Popover API (HTMLElement.showPopover & HTMLElement.hidePopover) and Floating UI for Tooltip positioning. Check it out:

Top comments (3)

formation cedric • Aug 16 • Edited

Hello,

That is a shame to use that much js when popover api allows to create a modal with only html. To make it work with react it is necessary to set popover="auto"
As for example:
<button popovertarget="mypoopover">clique to open my poop</button> <div id="mypoopover" popover="auto"> your content </div>

Henrique Ramos • Aug 19 • Edited

Hi! Thank you for you comment! Please note that in the snippet I provided, I'm creating a tooltip that shows up on hover and it's close to the target element. Your snippet would open a modal-ish element on the middle of the screen on button click.