diff --git a/packages/mdc-tooltip/_rich-tooltip-theme.scss b/packages/mdc-tooltip/_rich-tooltip-theme.scss index fdc370f7852..321cfbe8ffe 100644 --- a/packages/mdc-tooltip/_rich-tooltip-theme.scss +++ b/packages/mdc-tooltip/_rich-tooltip-theme.scss @@ -57,6 +57,8 @@ $light-theme: ( container-shadow-color: null, container-shape: null, container-surface-tint-layer-color: null, + content-overflow-y: null, + content-overflow-x: null, subhead-color: null, subhead-font: null, subhead-line-height: null, @@ -133,6 +135,10 @@ $light-theme: ( } @include _container-elevation(map.get($resolvers, 'elevation'), $theme); + @include tooltip-theme.content-scroll( + map.get($theme, 'content-overflow-x'), + map.get($theme, 'content-overflow-y') + ); .mdc-tooltip__surface .mdc-tooltip__title { @include typography.theme-styles( diff --git a/packages/mdc-tooltip/_tooltip-theme.scss b/packages/mdc-tooltip/_tooltip-theme.scss index 84e4e245813..a6ebe1772ff 100644 --- a/packages/mdc-tooltip/_tooltip-theme.scss +++ b/packages/mdc-tooltip/_tooltip-theme.scss @@ -44,6 +44,8 @@ $rich-background-color: theme-color.prop-value(surface); $rich-title-text-color: text-primary-on-light; $rich-content-text-color: rgba(black, theme-color.text-emphasis(medium)); $rich-content-link-color: primary; +$rich-content-overflow-x: unset; +$rich-content-overflow-y: auto; // Use a custom property so IE11 does not use "normal" and instead uses provided // fall-back value. @@ -256,3 +258,23 @@ $z-index: 9; overflow: hidden; } } + +// Sets the overflow behavior on interactive rich tooltip content. Note that +// this is only applied to INTERACTIVE rich tooltips, as the content of non- +// interactive rich tooltip is not focusable. This means keyboard users cannot +// scroll the tooltip content and is an a11y violation. Non-interactive rich +// tooltips should, therefore, utilize the `max-height` mixin above to increase +// the tooltip height. +@mixin content-scroll( + $content-overflow-x, + $content-overflow-y, + $query: feature-targeting.all() +) { + $feat-structure: feature-targeting.create-target($query, structure); + @include feature-targeting.targets($feat-structure) { + .mdc-tooltip__interactive-content { + @include theme.property(overflow-x, $content-overflow-x); + @include theme.property(overflow-y, $content-overflow-y); + } + } +} diff --git a/packages/mdc-tooltip/_tooltip.scss b/packages/mdc-tooltip/_tooltip.scss index 070ee9556fb..7d25273f6ac 100644 --- a/packages/mdc-tooltip/_tooltip.scss +++ b/packages/mdc-tooltip/_tooltip.scss @@ -264,6 +264,12 @@ $_caret-size: 24px; $query: $query ); + @include tooltip-theme.content-scroll( + tooltip-theme.$rich-content-overflow-x, + tooltip-theme.$rich-content-overflow-y, + $query: $query + ); + .mdc-tooltip { @include tooltip-theme.rich-fill-color( tooltip-theme.$rich-background-color,