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,20 +91,23 @@ class _QuillFontFamilyButtonState extends State<QuillFontFamilyButton> {
   Widget build(BuildContext context) {
     return ConstrainedBox(
       constraints: BoxConstraints.tightFor(height: widget.iconSize * 1.81),
-      child: RawMaterialButton(
+      child: UtilityWidgets.maybeTooltip(
-        visualDensity: VisualDensity.compact,
+        message: widget.tooltip,
-        shape: RoundedRectangleBorder(
+        child: RawMaterialButton(
-            borderRadius:
+          visualDensity: VisualDensity.compact,
-                BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2)),
+          shape: RoundedRectangleBorder(
-        fillColor: widget.fillColor,
+              borderRadius:
-        elevation: 0,
+                  BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2)),
-        hoverElevation: widget.hoverElevation,
+          fillColor: widget.fillColor,
-        highlightElevation: widget.hoverElevation,
+          elevation: 0,
-        onPressed: () {
+          hoverElevation: widget.hoverElevation,
-          _showMenu();
+          highlightElevation: widget.hoverElevation,
-          widget.afterButtonPressed?.call();
+          onPressed: () {
-        },
+            _showMenu();
-        child: _buildContent(context),
+            widget.afterButtonPressed?.call();
+          },
+          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,20 +92,23 @@ class _QuillFontSizeButtonState extends State<QuillFontSizeButton> {
   Widget build(BuildContext context) {
     return ConstrainedBox(
       constraints: BoxConstraints.tightFor(height: widget.iconSize * 1.81),
-      child: RawMaterialButton(
+      child: UtilityWidgets.maybeTooltip(
-        visualDensity: VisualDensity.compact,
+        message: widget.tooltip,
-        shape: RoundedRectangleBorder(
+        child: RawMaterialButton(
-            borderRadius:
+          visualDensity: VisualDensity.compact,
-                BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2)),
+          shape: RoundedRectangleBorder(
-        fillColor: widget.fillColor,
+              borderRadius:
-        elevation: 0,
+                  BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2)),
-        hoverElevation: widget.hoverElevation,
+          fillColor: widget.fillColor,
-        highlightElevation: widget.hoverElevation,
+          elevation: 0,
-        onPressed: () {
+          hoverElevation: widget.hoverElevation,
-          _showMenu();
+          highlightElevation: widget.hoverElevation,
-          widget.afterButtonPressed?.call();
+          onPressed: () {
-        },
+            _showMenu();
-        child: _buildContent(context),
+            widget.afterButtonPressed?.call();
+          },
+          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,24 +24,28 @@ 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: RawMaterialButton(
+      child: UtilityWidgets.maybeTooltip(
-        visualDensity: VisualDensity.compact,
+        message: tooltip,
-        shape: RoundedRectangleBorder(
+        child: RawMaterialButton(
-            borderRadius: BorderRadius.circular(borderRadius)),
+          visualDensity: VisualDensity.compact,
-        fillColor: fillColor,
+          shape: RoundedRectangleBorder(
-        elevation: 0,
+              borderRadius: BorderRadius.circular(borderRadius)),
-        hoverElevation: hoverElevation,
+          fillColor: fillColor,
-        highlightElevation: hoverElevation,
+          elevation: 0,
-        onPressed: () {
+          hoverElevation: hoverElevation,
-          onPressed?.call();
+          highlightElevation: hoverElevation,
-          afterPressed?.call();
+          onPressed: () {
-        },
+            onPressed?.call();
-        child: icon,
+            afterPressed?.call();
+          },
+          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,40 +96,45 @@ class _SelectAlignmentButtonState extends State<SelectAlignmentButton> {
               width: widget.iconSize * kIconButtonFactor,
               height: widget.iconSize * kIconButtonFactor,
             ),
-            child: RawMaterialButton(
+            child: UtilityWidgets.maybeTooltip(
-              hoverElevation: 0,
+              message: widget.tooltip,
-              highlightElevation: 0,
+              child: RawMaterialButton(
-              elevation: 0,
+                hoverElevation: 0,
-              visualDensity: VisualDensity.compact,
+                highlightElevation: 0,
-              shape: RoundedRectangleBorder(
+                elevation: 0,
-                  borderRadius: BorderRadius.circular(
+                visualDensity: VisualDensity.compact,
-                      widget.iconTheme?.borderRadius ?? 2)),
+                shape: RoundedRectangleBorder(
-              fillColor: _valueToText[_value] == _valueString[index]
+                    borderRadius: BorderRadius.circular(
-                  ? (widget.iconTheme?.iconSelectedFillColor ??
+                        widget.iconTheme?.borderRadius ?? 2)),
-                      Theme.of(context).primaryColor)
+                fillColor: _valueToText[_value] == _valueString[index]
-                  : (widget.iconTheme?.iconUnselectedFillColor ??
+                    ? (widget.iconTheme?.iconSelectedFillColor ??
-                      theme.canvasColor),
+                        Theme.of(context).primaryColor)
-              onPressed: () {
+                    : (widget.iconTheme?.iconUnselectedFillColor ??
-                _valueAttribute[index] == Attribute.leftAlignment
+                        theme.canvasColor),
-                    ? widget.controller
+                onPressed: () {
-                        .formatSelection(Attribute.clone(Attribute.align, null))
+                  _valueAttribute[index] == Attribute.leftAlignment
-                    : widget.controller.formatSelection(_valueAttribute[index]);
+                      ? widget.controller.formatSelection(
-                widget.afterButtonPressed?.call();
+                          Attribute.clone(Attribute.align, null))
-              },
+                      : widget.controller
-              child: Icon(
+                          .formatSelection(_valueAttribute[index]);
-                _valueString[index] == Attribute.leftAlignment.value
+                  widget.afterButtonPressed?.call();
-                    ? Icons.format_align_left
+                },
-                    : _valueString[index] == Attribute.centerAlignment.value
+                child: Icon(
-                        ? Icons.format_align_center
+                  _valueString[index] == Attribute.leftAlignment.value
-                        : _valueString[index] == Attribute.rightAlignment.value
+                      ? Icons.format_align_left
-                            ? Icons.format_align_right
+                      : _valueString[index] == Attribute.centerAlignment.value
-                            : Icons.format_align_justify,
+                          ? Icons.format_align_center
-                size: widget.iconSize,
+                          : _valueString[index] ==
-                color: _valueToText[_value] == _valueString[index]
+                                  Attribute.rightAlignment.value
-                    ? (widget.iconTheme?.iconSelectedColor ??
+                              ? Icons.format_align_right
-                        theme.primaryIconTheme.color)
+                              : Icons.format_align_justify,
-                    : (widget.iconTheme?.iconUnselectedColor ??
+                  size: widget.iconSize,
-                        theme.iconTheme.color),
+                  color: _valueToText[_value] == _valueString[index]
+                      ? (widget.iconTheme?.iconSelectedColor ??
+                          theme.primaryIconTheme.color)
+                      : (widget.iconTheme?.iconUnselectedColor ??
+                          theme.iconTheme.color),
+                ),
               ),
             ),
           ),

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,34 +82,37 @@ class _SelectHeaderStyleButtonState extends State<SelectHeaderStyleButton> {
             width: widget.iconSize * kIconButtonFactor,
             height: widget.iconSize * kIconButtonFactor,
           ),
-          child: RawMaterialButton(
+          child: UtilityWidgets.maybeTooltip(
-            hoverElevation: 0,
+            message: widget.tooltip,
-            highlightElevation: 0,
+            child: RawMaterialButton(
-            elevation: 0,
+              hoverElevation: 0,
-            visualDensity: VisualDensity.compact,
+              highlightElevation: 0,
-            shape: RoundedRectangleBorder(
+              elevation: 0,
-                borderRadius:
+              visualDensity: VisualDensity.compact,
-                    BorderRadius.circular(widget.iconTheme?.borderRadius ?? 2)),
+              shape: RoundedRectangleBorder(
-            fillColor: isSelected
+                  borderRadius: BorderRadius.circular(
-                ? (widget.iconTheme?.iconSelectedFillColor ??
+                      widget.iconTheme?.borderRadius ?? 2)),
-                    Theme.of(context).primaryColor)
+              fillColor: isSelected
-                : (widget.iconTheme?.iconUnselectedFillColor ??
+                  ? (widget.iconTheme?.iconSelectedFillColor ??
-                    theme.canvasColor),
+                      Theme.of(context).primaryColor)
-            onPressed: () {
+                  : (widget.iconTheme?.iconUnselectedFillColor ??
-              final _attribute = _selectedAttribute == attribute
+                      theme.canvasColor),
-                  ? Attribute.header
+              onPressed: () {
-                  : attribute;
+                final _attribute = _selectedAttribute == attribute
-              widget.controller.formatSelection(_attribute);
+                    ? Attribute.header
-              widget.afterButtonPressed?.call();
+                    : attribute;
-            },
+                widget.controller.formatSelection(_attribute);
-            child: Text(
+                widget.afterButtonPressed?.call();
-              _valueToText[attribute] ?? '',
+              },
-              style: style.copyWith(
+              child: Text(
-                color: isSelected
+                _valueToText[attribute] ?? '',
-                    ? (widget.iconTheme?.iconSelectedColor ??
+                style: style.copyWith(
-                        theme.primaryIconTheme.color)
+                  color: isSelected
-                    : (widget.iconTheme?.iconUnselectedColor ??
+                      ? (widget.iconTheme?.iconSelectedColor ??
-                        theme.iconTheme.color),
+                          theme.primaryIconTheme.color)
+                      : (widget.iconTheme?.iconUnselectedColor ??
+                          theme.iconTheme.color),
+                ),
               ),
             ),
           ),

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,16 +94,19 @@ class _ToggleCheckListButtonState extends State<ToggleCheckListButton> {
 
   @override
   Widget build(BuildContext context) {
-    return widget.childBuilder(
+    return UtilityWidgets.maybeTooltip(
-      context,
+      message: widget.tooltip,
-      Attribute.unchecked,
+      child: widget.childBuilder(
-      widget.icon,
+        context,
-      widget.fillColor,
+        Attribute.unchecked,
-      _isToggled,
+        widget.icon,
-      _toggleAttribute,
+        widget.fillColor,
-      widget.afterButtonPressed,
+        _isToggled,
-      widget.iconSize,
+        _toggleAttribute,
-      widget.iconTheme,
+        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,16 +68,19 @@ class _ToggleStyleButtonState extends State<ToggleStyleButton> {
 
   @override
   Widget build(BuildContext context) {
-    return widget.childBuilder(
+    return UtilityWidgets.maybeTooltip(
-      context,
+      message: widget.tooltip,
-      widget.attribute,
+      child: widget.childBuilder(
-      widget.icon,
+        context,
-      widget.fillColor,
+        widget.attribute,
-      _isToggled,
+        widget.icon,
-      _toggleAttribute,
+        widget.fillColor,
-      widget.afterButtonPressed,
+        _isToggled,
-      widget.iconSize,
+        _toggleAttribute,
-      widget.iconTheme,
+        widget.afterButtonPressed,
+        widget.iconSize,
+        widget.iconTheme,
+      ),
     );
   }