used the components Tooltip and Popover from Radix library
The reason I had to use 2 different components is because the Tooltip is working only on hover. This was a problem for touch devices, where we would need to click in order to activate the citation. According to this issue in the library repo:
This is by design. Tooltips are problematic on touch devices because there is no hover interaction, so if it was on tap it would fight with the general button action, or require 2 taps. That's also why tooltips should just be used generally for extra information that isn't mandatory do use your interface.
The solution was to use the Popover component while on touch devices, which works on click and would solve the problem.
I am using the hook useMedia to detect the breakpoint we're currently in. If we are in desktop, the Tooltip is being rendered, if we're on mobile-tablet, the Popover is being activated.
Why
Resolves #136
What
used the components
Tooltip
andPopover
fromRadix
libraryThe reason I had to use 2 different components is because the
Tooltip
is working onlyon hover
. This was a problem for touch devices, where we would need to click in order to activate the citation. According to this issue in the library repo:I am using the hook
useMedia
to detect the breakpoint we're currently in. If we are in desktop, theTooltip
is being rendered, if we're on mobile-tablet, thePopover
is being activated.Checklist