Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reusable Hover Mode and new Tooltip Behavior #1113

merged 12 commits into from Apr 18, 2021


Copy link

@mlaursen mlaursen commented Apr 14, 2021


This PR implements a few changes:

  1. Creates a new API for enabling hover mode for any element within your app along with a "sticky" mode
  2. Updates the tooltip package to use the new hover mode API
  3. Updates the tooltip package to expose hooks to implement tooltip-like functionality with useTooltip
  4. Updates the focusElementsWithin util to fallback to focusing the container element if there are no focusable children
  5. Added a new isFocusable util that checks if an element is tab focusable or programmatically focusable
  6. The Tooltip component now uses the ConditionalPortal component and defaults to portal=true

Hover Mode API

To use the new hover mode API, you must mount the HoverModeProvider component from @react-md/utils or the Configuration component from @react-md/layout as a parent component. Then, use the useHoverMode hook and provide the handlers to the "trigger" element and the temporary element. Check out the Hover Mode and Sticky Hover Mode for more information.

Updated Tooltip API

It is now recommended to use the useTooltip hook + Tooltip component instead of the Tooltipped component going forward, but I'm not planning on dropping support for the Tooltipped component. Check out the Tooltip Hook Usage Example for more information.


The TooltipHoverModeConfig component has been deprecated in favor of the new HoverModeProvider from @react-md/utils. This should be backwards compatible since the TooltipHoverModeConfig has been updated to pass props to the HoverModeProvider and the Configuration component from @react-md/layout has already been updated to use the new HoverModeProvider.

The Tooltipped component has deprecated these props, but I don't really think they should really have been used anyways in most apps.

Possible Typescript Errors

The onTouchMove prop is no longer required for the tooltip behavior and was removed from the Tooltipped component. If you created custom wrappers for the tooltip behavior, you'll need to remove the onTouchMove prop.

Possible Breaking Changes

This removes the internal useTooltipState and useTooltipHoverModeState hooks to use the new "public" API of useTooltip and useTooltipPosition. If you somehow found these hooks since they were undocumented, you'll need to change to the new API.

@github-actions github-actions bot added the form label Apr 18, 2021
Copy link

Codecov Report

❗ No coverage uploaded for pull request base (main@725d1c9). Click here to learn what that means.
The diff coverage is 96.78%.

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #1113   +/-   ##
  Coverage        ?   79.90%           
  Files           ?      328           
  Lines           ?     8882           
  Branches        ?     2293           
  Hits            ?     7097           
  Misses          ?     1704           
  Partials        ?       81           
Impacted Files Coverage Δ
packages/layout/src/Configuration.tsx 0.00% <0.00%> (ø)
packages/utils/src/wia-aria/focusElementWithin.ts 95.45% <80.00%> (ø)
packages/tooltip/src/Tooltip.tsx 96.66% <83.33%> (ø)
packages/tooltip/src/useTooltip.ts 96.66% <96.66%> (ø)
packages/form/src/slider/SliderValue.tsx 90.47% <100.00%> (ø)
packages/tooltip/src/Tooltipped.tsx 100.00% <100.00%> (ø)
packages/tooltip/src/constants.ts 100.00% <100.00%> (ø)
packages/tooltip/src/useTooltipPosition.ts 100.00% <100.00%> (ø)
packages/utils/src/hover/HoverModeProvider.tsx 100.00% <100.00%> (ø)
packages/utils/src/hover/constants.ts 100.00% <100.00%> (ø)
... and 3 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 725d1c9...b41136f. Read the comment docs.

@mlaursen mlaursen merged commit 6c760ec into main Apr 18, 2021
@mlaursen mlaursen deleted the feature/hover-mode branch April 18, 2021 20:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

Successfully merging this pull request may close these issues.

None yet

2 participants