Implement tooltips for toolbar buttons

lib/src/widgets/toolbar/clear_format_button.dart

@@ -12,6 +12,7 @@ class ClearFormatButton extends StatefulWidget {
     this.iconSize = kDefaultIconSize,
     this.iconTheme,
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -22,6 +23,7 @@ class ClearFormatButton extends StatefulWidget {
 
   final QuillIconTheme? iconTheme;
   final VoidCallback? afterButtonPressed;
+  final String? tooltip;
 
   @override
   _ClearFormatButtonState createState() => _ClearFormatButtonState();
@@ -36,6 +38,7 @@ class _ClearFormatButtonState extends State<ClearFormatButton> {
     final fillColor =
         widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor;
     return QuillIconButton(
+      tooltip: widget.tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
       size: widget.iconSize * kIconButtonFactor,

lib/src/widgets/toolbar/color_button.dart

@@ -21,6 +21,7 @@ class ColorButton extends StatefulWidget {
     this.iconSize = kDefaultIconSize,
     this.iconTheme,
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -30,6 +31,7 @@ class ColorButton extends StatefulWidget {
   final QuillController controller;
   final QuillIconTheme? iconTheme;
   final VoidCallback? afterButtonPressed;
+  final String? tooltip;
 
   @override
   _ColorButtonState createState() => _ColorButtonState();
@@ -119,6 +121,7 @@ class _ColorButtonState extends State<ColorButton> {
             : (widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor);
 
     return QuillIconButton(
+      tooltip: widget.tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
       size: widget.iconSize * kIconButtonFactor,

lib/src/widgets/toolbar/history_button.dart

@@ -12,6 +12,7 @@ class HistoryButton extends StatefulWidget {
     this.iconSize = kDefaultIconSize,
     this.iconTheme,
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -21,6 +22,7 @@ class HistoryButton extends StatefulWidget {
   final QuillController controller;
   final QuillIconTheme? iconTheme;
   final VoidCallback? afterButtonPressed;
+  final String? tooltip;
 
   @override
   _HistoryButtonState createState() => _HistoryButtonState();
@@ -41,6 +43,7 @@ class _HistoryButtonState extends State<HistoryButton> {
       _setIconColor();
     });
     return QuillIconButton(
+      tooltip: widget.tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
       size: widget.iconSize * 1.77,

lib/src/widgets/toolbar/indent_button.dart

@@ -12,6 +12,7 @@ class IndentButton extends StatefulWidget {
     this.iconSize = kDefaultIconSize,
     this.iconTheme,
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -22,6 +23,7 @@ class IndentButton extends StatefulWidget {
   final VoidCallback? afterButtonPressed;
 
   final QuillIconTheme? iconTheme;
+  final String? tooltip;
 
   @override
   _IndentButtonState createState() => _IndentButtonState();
@@ -37,6 +39,7 @@ class _IndentButtonState extends State<IndentButton> {
     final iconFillColor =
         widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor;
     return QuillIconButton(
+      tooltip: widget.tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
       size: widget.iconSize * 1.77,

lib/src/widgets/toolbar/link_style_button.dart

@@ -17,6 +17,7 @@ class LinkStyleButton extends StatefulWidget {
     this.iconTheme,
     this.dialogTheme,
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -26,6 +27,7 @@ class LinkStyleButton extends StatefulWidget {
   final QuillIconTheme? iconTheme;
   final QuillDialogTheme? dialogTheme;
   final VoidCallback? afterButtonPressed;
+  final String? tooltip;
 
   @override
   _LinkStyleButtonState createState() => _LinkStyleButtonState();
@@ -63,6 +65,7 @@ class _LinkStyleButtonState extends State<LinkStyleButton> {
     final isToggled = _getLinkAttributeValue() != null;
     final pressedHandler = () => _openLinkDialog(context);
     return QuillIconButton(
+      tooltip: widget.tooltip,
       highlightElevation: 0,
       hoverElevation: 0,
       size: widget.iconSize * kIconButtonFactor,

lib/src/widgets/toolbar/quill_font_family_button.dart

@@ -4,6 +4,7 @@ import '../../models/documents/attribute.dart';
 import '../../models/documents/style.dart';
 import '../../models/themes/quill_icon_theme.dart';
 import '../../translations/toolbar.i18n.dart';
+import '../../utils/widgets.dart';
 import '../controller.dart';
 
 class QuillFontFamilyButton extends StatefulWidget {
@@ -19,6 +20,7 @@ class QuillFontFamilyButton extends StatefulWidget {
     this.highlightElevation = 1,
     this.iconTheme,
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -33,6 +35,7 @@ class QuillFontFamilyButton extends StatefulWidget {
   final Attribute attribute;
   final QuillController controller;
   final VoidCallback? afterButtonPressed;
+  final String? tooltip;
 
   @override
   _QuillFontFamilyButtonState createState() => _QuillFontFamilyButtonState();
@@ -88,6 +91,8 @@ class _QuillFontFamilyButtonState extends State<QuillFontFamilyButton> {
   Widget build(BuildContext context) {
     return ConstrainedBox(
       constraints: BoxConstraints.tightFor(height: widget.iconSize * 1.81),
+      child: UtilityWidgets.maybeTooltip(
+        message: widget.tooltip,
         child: RawMaterialButton(
           visualDensity: VisualDensity.compact,
           shape: RoundedRectangleBorder(
@@ -103,6 +108,7 @@ class _QuillFontFamilyButtonState extends State<QuillFontFamilyButton> {
           },
           child: _buildContent(context),
         ),
+      ),
     );
   }
 

lib/src/widgets/toolbar/quill_font_size_button.dart

@@ -5,6 +5,7 @@ import '../../models/documents/style.dart';
 import '../../models/themes/quill_icon_theme.dart';
 import '../../translations/toolbar.i18n.dart';
 import '../../utils/font.dart';
+import '../../utils/widgets.dart';
 import '../controller.dart';
 
 class QuillFontSizeButton extends StatefulWidget {
@@ -20,6 +21,7 @@ class QuillFontSizeButton extends StatefulWidget {
     this.highlightElevation = 1,
     this.iconTheme,
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -34,6 +36,7 @@ class QuillFontSizeButton extends StatefulWidget {
   final Attribute attribute;
   final QuillController controller;
   final VoidCallback? afterButtonPressed;
+  final String? tooltip;
 
   @override
   _QuillFontSizeButtonState createState() => _QuillFontSizeButtonState();
@@ -89,6 +92,8 @@ class _QuillFontSizeButtonState extends State<QuillFontSizeButton> {
   Widget build(BuildContext context) {
     return ConstrainedBox(
       constraints: BoxConstraints.tightFor(height: widget.iconSize * 1.81),
+      child: UtilityWidgets.maybeTooltip(
+        message: widget.tooltip,
         child: RawMaterialButton(
           visualDensity: VisualDensity.compact,
           shape: RoundedRectangleBorder(
@@ -104,6 +109,7 @@ class _QuillFontSizeButtonState extends State<QuillFontSizeButton> {
           },
           child: _buildContent(context),
         ),
+      ),
     );
   }
 

lib/src/widgets/toolbar/quill_icon_button.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 
+import '../../utils/widgets.dart';
+
 class QuillIconButton extends StatelessWidget {
   const QuillIconButton({
     required this.onPressed,
@@ -10,6 +12,7 @@ class QuillIconButton extends StatelessWidget {
     this.hoverElevation = 1,
     this.highlightElevation = 1,
     this.borderRadius = 2,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -21,11 +24,14 @@ class QuillIconButton extends StatelessWidget {
   final double hoverElevation;
   final double highlightElevation;
   final double borderRadius;
+  final String? tooltip;
 
   @override
   Widget build(BuildContext context) {
     return ConstrainedBox(
       constraints: BoxConstraints.tightFor(width: size, height: size),
+      child: UtilityWidgets.maybeTooltip(
+        message: tooltip,
         child: RawMaterialButton(
           visualDensity: VisualDensity.compact,
           shape: RoundedRectangleBorder(
@@ -40,6 +46,7 @@ class QuillIconButton extends StatelessWidget {
           },
           child: icon,
         ),
+      ),
     );
   }
 }

lib/src/widgets/toolbar/search_button.dart

@@ -15,6 +15,7 @@ class SearchButton extends StatelessWidget {
     this.iconTheme,
     this.dialogTheme,
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -27,6 +28,7 @@ class SearchButton extends StatelessWidget {
 
   final QuillDialogTheme? dialogTheme;
   final VoidCallback? afterButtonPressed;
+  final String? tooltip;
 
   @override
   Widget build(BuildContext context) {
@@ -37,6 +39,7 @@ class SearchButton extends StatelessWidget {
         iconTheme?.iconUnselectedFillColor ?? (fillColor ?? theme.canvasColor);
 
     return QuillIconButton(
+      tooltip: tooltip,
       icon: Icon(icon, size: iconSize, color: iconColor),
       highlightElevation: 0,
       hoverElevation: 0,

lib/src/widgets/toolbar/select_alignment_button.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import '../../models/documents/attribute.dart';
 import '../../models/documents/style.dart';
 import '../../models/themes/quill_icon_theme.dart';
+import '../../utils/widgets.dart';
 import '../controller.dart';
 import '../toolbar.dart';
 
@@ -17,6 +18,7 @@ class SelectAlignmentButton extends StatefulWidget {
     this.showRightAlignment,
     this.showJustifyAlignment,
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -29,6 +31,7 @@ class SelectAlignmentButton extends StatefulWidget {
   final bool? showRightAlignment;
   final bool? showJustifyAlignment;
   final VoidCallback? afterButtonPressed;
+  final String? tooltip;
 
   @override
   _SelectAlignmentButtonState createState() => _SelectAlignmentButtonState();
@@ -93,6 +96,8 @@ class _SelectAlignmentButtonState extends State<SelectAlignmentButton> {
               width: widget.iconSize * kIconButtonFactor,
               height: widget.iconSize * kIconButtonFactor,
             ),
+            child: UtilityWidgets.maybeTooltip(
+              message: widget.tooltip,
               child: RawMaterialButton(
                 hoverElevation: 0,
                 highlightElevation: 0,
@@ -108,9 +113,10 @@ class _SelectAlignmentButtonState extends State<SelectAlignmentButton> {
                         theme.canvasColor),
                 onPressed: () {
                   _valueAttribute[index] == Attribute.leftAlignment
-                    ? widget.controller
-                        .formatSelection(Attribute.clone(Attribute.align, null))
-                    : widget.controller.formatSelection(_valueAttribute[index]);
+                      ? widget.controller.formatSelection(
+                          Attribute.clone(Attribute.align, null))
+                      : widget.controller
+                          .formatSelection(_valueAttribute[index]);
                   widget.afterButtonPressed?.call();
                 },
                 child: Icon(
@@ -118,7 +124,8 @@ class _SelectAlignmentButtonState extends State<SelectAlignmentButton> {
                       ? Icons.format_align_left
                       : _valueString[index] == Attribute.centerAlignment.value
                           ? Icons.format_align_center
-                        : _valueString[index] == Attribute.rightAlignment.value
+                          : _valueString[index] ==
+                                  Attribute.rightAlignment.value
                               ? Icons.format_align_right
                               : Icons.format_align_justify,
                   size: widget.iconSize,
@@ -130,6 +137,7 @@ class _SelectAlignmentButtonState extends State<SelectAlignmentButton> {
                 ),
               ),
             ),
+          ),
         );
       }),
     );

lib/src/widgets/toolbar/select_header_style_button.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import '../../models/documents/attribute.dart';
 import '../../models/documents/style.dart';
 import '../../models/themes/quill_icon_theme.dart';
+import '../../utils/widgets.dart';
 import '../controller.dart';
 import '../toolbar.dart';
 
@@ -20,6 +21,7 @@ class SelectHeaderStyleButton extends StatefulWidget {
       Attribute.h3,
     ],
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -29,6 +31,7 @@ class SelectHeaderStyleButton extends StatefulWidget {
   final QuillIconTheme? iconTheme;
   final List<Attribute> attributes;
   final VoidCallback? afterButtonPressed;
+  final String? tooltip;
 
   @override
   _SelectHeaderStyleButtonState createState() =>
@@ -79,14 +82,16 @@ class _SelectHeaderStyleButtonState extends State<SelectHeaderStyleButton> {
             width: widget.iconSize * kIconButtonFactor,
             height: widget.iconSize * kIconButtonFactor,
           ),
+          child: UtilityWidgets.maybeTooltip(
+            message: widget.tooltip,
             child: RawMaterialButton(
               hoverElevation: 0,
               highlightElevation: 0,
               elevation: 0,
               visualDensity: VisualDensity.compact,
               shape: RoundedRectangleBorder(
-                borderRadius:
-                    BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2)),
+                  borderRadius: BorderRadius.circular(
+                      widget.iconTheme?.borderRadius ?? 2)),
               fillColor: isSelected
                   ? (widget.iconTheme?.iconSelectedFillColor ??
                       Theme.of(context).primaryColor)
@@ -111,6 +116,7 @@ class _SelectHeaderStyleButtonState extends State<SelectHeaderStyleButton> {
               ),
             ),
           ),
+        ),
       );
     }).toList();
 

lib/src/widgets/toolbar/toggle_check_list_button.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import '../../models/documents/attribute.dart';
 import '../../models/documents/style.dart';
 import '../../models/themes/quill_icon_theme.dart';
+import '../../utils/widgets.dart';
 import '../controller.dart';
 import '../toolbar.dart';
 
@@ -16,6 +17,7 @@ class ToggleCheckListButton extends StatefulWidget {
     this.childBuilder = defaultToggleStyleButtonBuilder,
     this.iconTheme,
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -32,6 +34,7 @@ class ToggleCheckListButton extends StatefulWidget {
 
   final QuillIconTheme? iconTheme;
   final VoidCallback? afterButtonPressed;
+  final String? tooltip;
 
   @override
   _ToggleCheckListButtonState createState() => _ToggleCheckListButtonState();
@@ -91,7 +94,9 @@ class _ToggleCheckListButtonState extends State<ToggleCheckListButton> {
 
   @override
   Widget build(BuildContext context) {
-    return widget.childBuilder(
+    return UtilityWidgets.maybeTooltip(
+      message: widget.tooltip,
+      child: widget.childBuilder(
         context,
         Attribute.unchecked,
         widget.icon,
@@ -101,6 +106,7 @@ class _ToggleCheckListButtonState extends State<ToggleCheckListButton> {
         widget.afterButtonPressed,
         widget.iconSize,
         widget.iconTheme,
+      ),
     );
   }
 

lib/src/widgets/toolbar/toggle_style_button.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import '../../models/documents/attribute.dart';
 import '../../models/documents/style.dart';
 import '../../models/themes/quill_icon_theme.dart';
+import '../../utils/widgets.dart';
 import '../controller.dart';
 import '../toolbar.dart';
 
@@ -28,6 +29,7 @@ class ToggleStyleButton extends StatefulWidget {
     this.childBuilder = defaultToggleStyleButtonBuilder,
     this.iconTheme,
     this.afterButtonPressed,
+    this.tooltip,
     Key? key,
   }) : super(key: key);
 
@@ -46,6 +48,7 @@ class ToggleStyleButton extends StatefulWidget {
   final QuillIconTheme? iconTheme;
 
   final VoidCallback? afterButtonPressed;
+  final String? tooltip;
 
   @override
   _ToggleStyleButtonState createState() => _ToggleStyleButtonState();
@@ -65,7 +68,9 @@ class _ToggleStyleButtonState extends State<ToggleStyleButton> {
 
   @override
   Widget build(BuildContext context) {
-    return widget.childBuilder(
+    return UtilityWidgets.maybeTooltip(
+      message: widget.tooltip,
+      child: widget.childBuilder(
         context,
         widget.attribute,
         widget.icon,
@@ -75,6 +80,7 @@ class _ToggleStyleButtonState extends State<ToggleStyleButton> {
         widget.afterButtonPressed,
         widget.iconSize,
         widget.iconTheme,
+      ),
     );
   }