feat: Add maxWidth to TooltipTheme for easy text-wrapping (#1095)

bdlukaa · Jul 30, 2024 · b3f9fc1 · b3f9fc1
2 parents c156758 + 7896905
commit b3f9fc1
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 * fix: Resolved issue where `PaneItem` within `PaneItemExpander` remained accessible in `NavigationPane` compact mode ([#1081](https://github.com/bdlukaa/fluent_ui/issues/1081))
 * fix: Correct number of days on `DatePicker` popup ([#1049](https://github.com/bdlukaa/fluent_ui/issues/1049))
 * feat: Create `PaneItemWidgetAdapter` ([#1087](https://github.com/bdlukaa/fluent_ui/issues/1087))
+* feat: Add `maxWidth` to `TooltipThemeData` for optional wrapping of long tooltips ([#1094](https://github.com/bdlukaa/fluent_ui/issues/1094))
 
 ## 4.9.0
 

diff --git a/example/lib/screens/popups/tooltip.dart b/example/lib/screens/popups/tooltip.dart
@@ -106,6 +106,46 @@ class TooltipPage extends StatelessWidget with PageMixin {
             ),
           ),
         ),
+        subtitle(
+          content: const Text(
+            'Extra long tooltip content that wraps',
+          ),
+        ),
+        CardHighlight(
+          codeSnippet: '''Tooltip(
+  message:
+      List.generate(25, (_) => 'This is a really long tooltip! ')
+          .join(" "),
+  useMousePosition: false,
+  style: const TooltipThemeData(
+    maxWidth: 500,
+    preferBelow: true,
+    waitDuration: Duration(),
+  ),
+  child: IconButton(
+    icon: const Icon(FluentIcons.text_overflow, size: 24.0),
+    onPressed: () {},
+  ),
+),''',
+          child: Align(
+            alignment: AlignmentDirectional.centerStart,
+            child: Tooltip(
+              message:
+                  List.generate(25, (_) => 'This is a really long tooltip! ')
+                      .join(" "),
+              useMousePosition: false,
+              style: const TooltipThemeData(
+                maxWidth: 500,
+                preferBelow: true,
+                waitDuration: Duration(),
+              ),
+              child: IconButton(
+                icon: const Icon(FluentIcons.text_overflow, size: 24.0),
+                onPressed: () {},
+              ),
+            ),
+          ),
+        ),
       ],
     );
   }

diff --git a/lib/src/controls/surfaces/tooltip.dart b/lib/src/controls/surfaces/tooltip.dart
@@ -210,6 +210,7 @@ class _TooltipState extends State<Tooltip> with SingleTickerProviderStateMixin {
   Offset? mousePosition;
   late TooltipTriggerMode triggerMode;
   late bool enableFeedback;
+  late double? maxWidth;
   late bool _isConcealed;
   late bool _forceRemoval;
   late bool _visible;
@@ -406,6 +407,7 @@ class _TooltipState extends State<Tooltip> with SingleTickerProviderStateMixin {
         verticalOffset: verticalOffset,
         preferBelow: preferBelow,
         displayHorizontally: widget.displayHorizontally,
+        maxWidth: maxWidth,
       ),
     );
     _entry = OverlayEntry(builder: (_) => overlay);
@@ -518,6 +520,7 @@ class _TooltipState extends State<Tooltip> with SingleTickerProviderStateMixin {
     hoverShowDuration = _defaultHoverShowDuration;
     triggerMode = widget.triggerMode ?? _defaultTriggerMode;
     enableFeedback = widget.enableFeedback ?? _defaultEnableFeedback;
+    maxWidth = tooltipTheme.maxWidth;
 
     Widget result = Semantics(
       label: excludeFromSemantics ? null : _tooltipMessage,
@@ -675,6 +678,9 @@ class TooltipThemeData with Diagnosticable {
   /// If null, [Typography.caption] is used
   final TextStyle? textStyle;
 
+  /// If non-null, the maximum width of the tooltip text before it wraps.
+  final double? maxWidth;
+
   const TooltipThemeData({
     this.height,
     this.verticalOffset,
@@ -685,6 +691,7 @@ class TooltipThemeData with Diagnosticable {
     this.showDuration,
     this.waitDuration,
     this.textStyle,
+    this.maxWidth,
   });
 
   factory TooltipThemeData.standard(FluentThemeData theme) {
@@ -749,6 +756,7 @@ class TooltipThemeData with Diagnosticable {
       verticalOffset: lerpDouble(a?.verticalOffset, b?.verticalOffset, t),
       waitDuration: lerpDuration(a?.waitDuration ?? Duration.zero,
           b?.waitDuration ?? Duration.zero, t),
+      maxWidth: lerpDouble(a?.maxWidth, b?.maxWidth, t),
     );
   }
 
@@ -764,6 +772,7 @@ class TooltipThemeData with Diagnosticable {
       textStyle: style.textStyle ?? textStyle,
       verticalOffset: style.verticalOffset ?? verticalOffset,
       waitDuration: style.waitDuration ?? waitDuration,
+      maxWidth: style.maxWidth ?? maxWidth,
     );
   }
 
@@ -787,7 +796,8 @@ class TooltipThemeData with Diagnosticable {
       ..add(DiagnosticsProperty<Decoration>('decoration', decoration))
       ..add(DiagnosticsProperty<Duration>('waitDuration', waitDuration))
       ..add(DiagnosticsProperty<Duration>('showDuration', showDuration))
-      ..add(DiagnosticsProperty<TextStyle>('textStyle', textStyle));
+      ..add(DiagnosticsProperty<TextStyle>('textStyle', textStyle))
+      ..add(DoubleProperty('maxWidth', maxWidth));
   }
 }
 
@@ -866,6 +876,7 @@ class _TooltipOverlay extends StatelessWidget {
     required this.verticalOffset,
     required this.preferBelow,
     this.displayHorizontally = false,
+    this.maxWidth,
   });
 
   final InlineSpan richMessage;
@@ -878,6 +889,7 @@ class _TooltipOverlay extends StatelessWidget {
   final double verticalOffset;
   final bool preferBelow;
   final bool displayHorizontally;
+  final double? maxWidth;
 
   @override
   Widget build(BuildContext context) {
@@ -893,6 +905,7 @@ class _TooltipOverlay extends StatelessWidget {
             decoration: decoration,
             padding: padding,
             margin: margin,
+            constraints: BoxConstraints(maxWidth: maxWidth ?? double.infinity),
             child: Center(
               widthFactor: 1.0,
               heightFactor: 1.0,