-
Notifications
You must be signed in to change notification settings - Fork 29.2k
Description
BottomNavigationBar has no API for enabling/disabling its tooltips. Widgets that implement and use tooltips must also include an API that can be used to set the tooltip string to a value that differs from its default tooltip string(s) and to completely disable its tooltips. BottomNavigationBar now always shows its icon label as a tooltip on Web and Desktop, which seldom adds any value to the often already shown icon label.
Then newer BottomNavigationBar
that uses BottomNavigationBarItem
that deprecates title
in favor of label
is currently not very desktop/web friendly when it comes to providing control over its tooltips. It misbehaves to the extent that it is an issue.
- There is no way to turn of the tooltips!
- There is no way to provide a tooltip label that differs from the icon label!
Q: What value does the additional tooltip label that is identical to the already shown icon label provide?
If there was a way to via the API e.g. as a new property in BottomNavigationBarItem
to provide a separate tooltipLabel
that could provide some additional info in addition to the already visible string in the icon label, then its tooltips might be made more useful.
For BottomNavigationBarItem
it could e.g. be added so that it uses label
for tooltips by default and a separate tooltipLabel
value if one is provided. There still needs to be a way to turn of the tooltips as you might not want to have tooltips at all on desktop and web when using the widget.
Many web and desktop may want to implement a global user controllable feature that enables and disables tooltips in the app entirely. Tooltips are nice for beginners when you are not familiar with the app, but when you know the app they tend to get annoying and get in the way of using the app. Providing users a feature where you can turn off tooltips is a nice way to increase the UX for more experienced users of your app.
Currently many widget in Flutter that uses tooltips make it impossible (or at least more difficult than it needs to be) to implement this feature as they have no way of turning off tooltips at all. TheBottomNavigationBar
is one critical widget that fails in this respect.
This example with the bottom navigation bar is based on the API docs sample:
https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
Where the deprecated (in beta channel and higher) title
was replaced with label
. On web and desktop platforms this results in a bottom navigation bar where there always is a rather useless extra tooltip that is identical to the label, with no apparent way of turning it off in the API or changing the tooltip label to something else. The only way to fix this now seems to be to fork both BottomNavigationBarItem
and BottomNavigationBar
and make custom versions of them, which from a maintenance point of view is less than ideal.
Example BottomNavigationBar
code snippet:
https://gist.github.com/rydmike/e97d29789886b9b406618d851d765fff
Can be tried in DartPad here:
https://dartpad.dev/e97d29789886b9b406618d851d765fff
Related issues
The BottomNavigationBarItem
case is just one example case, there might be more Widgets with similar tooltip issues on web and desktop. One found related sister topic is the similar issue with PopupMenuButton
#60418.
Background
This issue was previously included as the 2nd part of the new feature proposal "Global enable/disable of tooltips in Flutter apps and provide API control over widget tooltips" #66993. I removed this issue part from that proposal and added this specific topic as a more actionable issue instead, just mentioning it and also its related sister issue #60418 as case examples where the lack of proper tooltip APIs are an issue.
The proposal #66993 itself is a bit more broad and includes a suggestion of providing an built in app level toggle to enable and disable tooltips.
Flutter doctor
flutter doctor -v
[√] Flutter (Channel beta, 1.24.0-10.2.pre, on Microsoft Windows [Version 10.0.18363.1139], locale en-US)
• Flutter version 1.24.0-10.2.pre at C:\Users\mryds\fvm\versions\beta
• Framework revision 022b333a08 (4 days ago), 2020-11-18 11:35:09 -0800
• Engine revision 07c1eed46b
• Dart version 2.12.0 (build 2.12.0-29.10.beta)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
• Android SDK at C:\Users\mryds\AppData\Local\Android\sdk
• Platform android-30, build-tools 29.0.1
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
[√] Android Studio (version 4.1.0)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
[√] IntelliJ IDEA Community Edition (version 2020.2)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2018.3.1
• Flutter plugin version 51.0.3
• Dart plugin version 202.8070
[√] VS Code (version 1.51.1)
• VS Code at C:\Users\mryds\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.16.0
[√] Connected device (4 available)
• Nexus 7 (mobile) • 0a99f5e8 • android-arm • Android 6.0.1 (API 23)
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome 86.0.4240.198
• Edge (web) • edge • web-javascript • Microsoft Edge 87.0.664.41
• No issues found!