From cfec83c749a1b6b6602c4d2fa474d3e776e7c97b Mon Sep 17 00:00:00 2001
From: Material Web Team <material-web-copybara@google.com>
Date: Mon, 20 May 2024 11:50:45 -0700
Subject: [PATCH] feat(tooltip): Add mixin to set max-width of rich tooltip.

PiperOrigin-RevId: 635525322
---
 packages/mdc-tooltip/README.md           |  1 +
 packages/mdc-tooltip/_tooltip-theme.scss | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/mdc-tooltip/README.md b/packages/mdc-tooltip/README.md
index 623529df02b..56372885c1d 100644
--- a/packages/mdc-tooltip/README.md
+++ b/packages/mdc-tooltip/README.md
@@ -317,6 +317,7 @@ Mixin | Description
 `show-transition($enter-duration)` | Sets the duration for the animation that shows the tooltip.
 `exit-transition($exit-duration)` | Sets the duration for the animation that hides the tooltip.
 `rich-max-height($max-height)` | Sets the max-height of a rich tooltip.
+`rich-max-width($max-width)` | Sets the max-width of a rich tooltip.
 
 ### `MDCTooltip` Methods
 
diff --git a/packages/mdc-tooltip/_tooltip-theme.scss b/packages/mdc-tooltip/_tooltip-theme.scss
index a6ebe1772ff..0f60bc3ff59 100644
--- a/packages/mdc-tooltip/_tooltip-theme.scss
+++ b/packages/mdc-tooltip/_tooltip-theme.scss
@@ -211,6 +211,25 @@ $z-index: 9;
   }
 }
 
+// Sets the max-width of the rich tooltip.
+// @param {Number} $max-width
+@mixin rich-max-width($max-width, $query: feature-targeting.all()) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+
+  &.mdc-tooltip--rich {
+    .mdc-tooltip__surface {
+      @include feature-targeting.targets($feat-structure) {
+        @include theme.property(max-width, $max-width);
+      }
+      .mdc-tooltip__content {
+        @include feature-targeting.targets($feat-structure) {
+          @include theme.property(max-width, $max-width);
+        }
+      }
+    }
+  }
+}
+
 // Sets the z-index of the tooltip.
 // @param {Number} $z-index
 @mixin z-index($z-index, $query: feature-targeting.all()) {