All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
useTooltip
supports new disabled option
(a934ae9)DEFAULT_HOVER_MODE_STICKY_EXIT_TIME
has been renamed to
DEFAULT_HOVER_MODE_EXIT_TIME
.exitVisibilityDelay
always defaults to DEFAULT_HOVER_MODE_EXIT_TIME
.useHoverMode
hook no longer accepts an HTMLElement
generic and instead
the event handlers will automatically infer the HTMLElement
based on usage.useHoverMode
hook no longer returns stickyHandlers
and instead returns
hoverHandlers
that only include onMouseEnter
and onMouseLeave
. The
handlers
that are returned now include onClick
, onMouseEnter
, and
onMouseLeave
. This was kind of what the stickyHandlers
was before. In
addition, clicking an element no longer disabled the hover mode behavior.HoverModeOnlyOptions
,
HoverModeOnlyReturnValue
import type
when possible
(ba96bb6)eslint
(8111cd3)prop-types
package.yarn format
to include new files
(48d3d7f)Tooltipped
component
(6dca9b1)TooltipHoverModeConfig
componentTooltipped
componentNote: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
typedoc
(cf54c35)Note: Version bump only for package @react-md/tooltip
useTooltip
code
(0a6aed9)Tooltip
to use new Hover Mode
(386f47b)Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
Note: Version bump only for package @react-md/tooltip
sideEffects
field to package.json
(31820b9)sideEffects
formatting
(78a7b6b)No changes.
Tooltips were completely re-written for the v2 release to help fix the missing
accessibility issues from v1. One of the most "exciting" things that was added
during the re-write is that tooltips will now automatically determine the "best"
location to render itself within the viewport instead of manually needing to
change the position
yourself! Woo hoo!
Starting from v2, you'll probably just want to use the Tooltipped
component as
it'll handle all the functionality of a tooltip for you and ensuring that
correct props are added to the element being tooltipped.
position: relative
containerid
to help with accessibility concerns and the
tooltipped element gains a aria-describedby
pointing to the tooltip's id.lineWrap
prop
instead of having to write all the custom CSS yourself.dense
prop is enabled or the $rmd-utils-auto-dense
variable is enabled.border-radius
injectTooltip
higher order component was removedTooltipContainer
component was removed$rmd-toolip-line-height: 1.5rem !default
- The line height to use for the
tooltip text.$rmd-tooltip-line-wrap-vertical-padding: 0.5625rem !default
- The amount of
padding to apply to the top and bottom of the tooltip when line wrapping is
enabled.$rmd-tooltip-border-radius: 0.25rem !default
- The new border radius applied
to tooltips$rmd-tooltip-transition-distance: 0.5rem !default
- The distance that the
tooltip should animate while appearing and hiding.$rmd-tooltip-color
- The text color to use for tooltips that will
automatically be adjusted to be contrast compliant relative to the
$rmd-tooltip-background-color
. Can be overridden manually.$rmd-tooltip-max-width: 15rem !default
- The max width to use for tooltips.
This is mostly to help with the new line wrapping functionality.$rmd-tooltip-enter-duration: $rmd-transition-standard-time !default
- The
tooltip's enter transition duration.$rmd-tooltip-exit-duration: $rmd-transition-standard-time !default
- The
tooltip's exit transition duration.$rmd-tooltip-z-index: 100 !default
- The z-index
to apply to tooltips@function rmd-tooltip-theme
- gets one of the theme values and validates
that the theme name is valid@function rmd-tooltip-theme-var
- gets one of the theme values as a css
variable with a fallback value and validates that the theme name is valid@mixin rmd-tooltip-theme
- applies one of the theme values to a css property
as a css variable@mixin rmd-tooltip-theme-update-var
- updates one of the theme values as a
css variable@mixin rmd-tooltip-dense-theme
- updates all the tooltip theme styles via
CSS variables to use the dense theme (automatically handled from
@react-md/utils if the $rmd-utils-auto-dense
variable has been enabled).$md-tooltip-mobile-font-size
was renamed to $rmd-tooltip-font-size
and
changed the default value from 14px
to 1rem
$md-tooltip-mobile-tile-height
was renamed to $rmd-tooltip-min-height
and
changed the default value from 32px
to 2rem
$md-tooltip-mobile-lr-padding
was renamed to
$rmd-tooltip-horizontal-padding
and changed the default value from 16px
to
1rem
$md-tooltip-mobile-top-margin
was renamed to $md-tooltip-spacing
and
changed the default value from 24px
to 1.5rem
$md-tooltip-desktop-font-size
was renamed to $rmd-tooltip-dense-font-size
and changed the default value from 10px
to 0.625rem
$md-tooltip-desktop-tile-height
was renamed to
$rmd-tooltip-dense-min-height
and changed the default value from 22px
to
1.375rem
$md-tooltip-desktop-lr-padding
was renamed to
$rmd-tooltip-dense-horizontal-padding
and changed the default value from
8px
to 0.5rem
$md-tooltip-desktop-top-margin
was renamed to $md-tooltip-dense-spacing
and changed the default value from 14px
to 0.875rem
$md-tooltip-mobile-tb-padding
was removed since there is new line wrap
functionality and variables$md-tooltip-desktop-tb-padding
was removed since there is new line wrap
functionality and variables