YaruNavigationRailItem: add tooltip

example/lib/example_page_items.dart

@@ -19,93 +19,110 @@ import 'pages/tile_page.dart';
 class PageItem {
   const PageItem({
     required this.titleBuilder,
+    required this.tooltipMessage,
     required this.pageBuilder,
     required this.iconBuilder,
   });
 
   final WidgetBuilder titleBuilder;
+  final String tooltipMessage;
   final WidgetBuilder pageBuilder;
   final Widget Function(BuildContext context, bool selected) iconBuilder;
 }
 
 final examplePageItems = <PageItem>[
   PageItem(
     titleBuilder: (context) => const Text('YaruBanner'),
+    tooltipMessage: 'YaruBanner',
     pageBuilder: (context) => const BannerPage(),
     iconBuilder: (context, selected) => selected
         ? const Icon(YaruIcons.image_filled)
         : const Icon(YaruIcons.image),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruCarousel'),
+    tooltipMessage: 'YaruCarousel',
     pageBuilder: (_) => const CarouselPage(),
     iconBuilder: (context, selected) => const Icon(YaruIcons.refresh),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruCheckButton'),
+    tooltipMessage: 'YaruCheckButton',
     pageBuilder: (context) => const CheckButtonPage(),
     iconBuilder: (context, selected) =>
         const Icon(YaruIcons.checkbox_button_checked),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruColorDisk'),
+    tooltipMessage: 'YaruColorDisk',
     pageBuilder: (context) => const ColorDiskPage(),
     iconBuilder: (context, selected) => const Icon(YaruIcons.color_select),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruDraggable'),
+    tooltipMessage: 'YaruDraggable',
     pageBuilder: (context) => const DraggablePage(),
     iconBuilder: (context, selected) => const Icon(YaruIcons.drag_handle),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruExpandable'),
+    tooltipMessage: 'YaruExpandable',
     iconBuilder: (context, selected) => const Icon(YaruIcons.pan_down),
     pageBuilder: (_) => const ExpandablePage(),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruIconButton'),
+    tooltipMessage: 'YaruIconButton',
     iconBuilder: (context, selected) => const Icon(YaruIcons.app_grid),
     pageBuilder: (_) => const IconButtonPage(),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruOptionButton'),
+    tooltipMessage: 'YaruOptionButton',
     iconBuilder: (context, selected) => const Icon(YaruIcons.settings),
     pageBuilder: (_) => const OptionButtonPage(),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruProgressIndicator'),
+    tooltipMessage: 'YaruProgressIndicator',
     iconBuilder: (context, selected) => const Icon(YaruIcons.download),
     pageBuilder: (_) => const ProgressIndicatorPage(),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruRadioButton'),
+    tooltipMessage: 'YaruRadioButton',
     pageBuilder: (context) => const RadioButtonPage(),
     iconBuilder: (context, selected) =>
         const Icon(YaruIcons.radio_button_checked),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruSection'),
+    tooltipMessage: 'YaruSection',
     iconBuilder: (context, selected) => const Icon(YaruIcons.window),
     pageBuilder: (_) => const SectionPage(),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruSelectableContainer'),
+    tooltipMessage: 'YaruSelectableContainer',
     iconBuilder: (context, selected) => const Icon(YaruIcons.selection),
     pageBuilder: (_) => const SelectableContainerPage(),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruTabbedPage'),
+    tooltipMessage: 'YaruTabbedPage',
     pageBuilder: (_) => const TabbedPagePage(),
     iconBuilder: (context, selected) => const Icon(YaruIcons.tab_new),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruTile'),
+    tooltipMessage: 'YaruTile',
     iconBuilder: (context, selected) =>
         const Icon(YaruIcons.format_unordered_list),
     pageBuilder: (_) => const TilePage(),
   ),
   PageItem(
     titleBuilder: (context) => const Text('YaruDialogTitle'),
+    tooltipMessage: 'YaruDialogTitle',
     iconBuilder: (context, selected) => selected
         ? const Icon(YaruIcons.information_filled)
         : const Icon(YaruIcons.information),

example/lib/main.dart

@@ -34,6 +34,7 @@ class _HomeState extends State<Home> {
   Widget build(BuildContext context) {
     final configItem = PageItem(
       titleBuilder: (context) => const Text('Layout'),
+      tooltipMessage: 'Layout',
       pageBuilder: (_) => ListView(
         padding: const EdgeInsets.all(kYaruPagePadding),
         children: [
@@ -103,6 +104,7 @@ class _CompactPage extends StatelessWidget {
       itemBuilder: (context, index, selected) => YaruNavigationRailItem(
         icon: pageItems[index].iconBuilder(context, selected),
         label: pageItems[index].titleBuilder(context),
+        tooltip: pageItems[index].tooltipMessage,
         style: width > 1000
             ? YaruNavigationRailStyle.labelledExtended
             : width > 500

lib/src/layouts/yaru_navigation_rail_item.dart

@@ -14,20 +14,23 @@ enum YaruNavigationRailStyle {
 
 const _kSizeAnimationDuration = Duration(milliseconds: 200);
 const _kSelectedIconAnimationDuration = Duration(milliseconds: 250);
+const _kTooltipWaitDuration = Duration(milliseconds: 500);
 
 class YaruNavigationRailItem extends StatefulWidget {
   const YaruNavigationRailItem({
     super.key,
     this.selected,
     required this.icon,
     required this.label,
+    this.tooltip,
     this.onTap,
     required this.style,
   });
 
   final bool? selected;
   final Widget icon;
   final Widget label;
+  final String? tooltip;
   final VoidCallback? onTap;
   final YaruNavigationRailStyle style;
 
@@ -49,32 +52,34 @@ class _YaruNavigationRailItemState extends State<YaruNavigationRailItem> {
   @override
   Widget build(BuildContext context) {
     return _buildSizedContainer(
-      Material(
-        child: InkWell(
-          onTap: () {
-            final scope = YaruNavigationRailItemScope.maybeOf(context);
-            scope?.onTap();
-            widget.onTap?.call();
-          },
-          child: Center(
-            child: Padding(
-              padding: EdgeInsets.symmetric(
-                vertical:
-                    widget.style == YaruNavigationRailStyle.labelledExtended
-                        ? 10
-                        : 5,
-                horizontal:
-                    widget.style == YaruNavigationRailStyle.labelledExtended
-                        ? 8
-                        : 5,
+      _maybeBuildTooltip(
+        Material(
+          child: InkWell(
+            onTap: () {
+              final scope = YaruNavigationRailItemScope.maybeOf(context);
+              scope?.onTap();
+              widget.onTap?.call();
+            },
+            child: Center(
+              child: Padding(
+                padding: EdgeInsets.symmetric(
+                  vertical:
+                      widget.style == YaruNavigationRailStyle.labelledExtended
+                          ? 10
+                          : 5,
+                  horizontal:
+                      widget.style == YaruNavigationRailStyle.labelledExtended
+                          ? 8
+                          : 5,
+                ),
+                child: _buildColumnOrRow([
+                  _buildIcon(context),
+                  if (widget.style != YaruNavigationRailStyle.compact) ...[
+                    _buildGap(),
+                    _buildLabel(context),
+                  ]
+                ]),
               ),
-              child: _buildColumnOrRow([
-                _buildIcon(context),
-                if (widget.style != YaruNavigationRailStyle.compact) ...[
-                  _buildGap(),
-                  _buildLabel(context),
-                ]
-              ]),
             ),
           ),
         ),
@@ -119,6 +124,18 @@ class _YaruNavigationRailItemState extends State<YaruNavigationRailItem> {
     );
   }
 
+  Widget _maybeBuildTooltip(Widget child) {
+    if (widget.tooltip != null) {
+      return Tooltip(
+        message: widget.tooltip!,
+        waitDuration: _kTooltipWaitDuration,
+        child: child,
+      );
+    }
+
+    return child;
+  }
+
   Widget _buildColumnOrRow(List<Widget> children) {
     const mainAxisAlignment = MainAxisAlignment.start;