Skip to content

BottomNavigationBarItem's tooltip should not use the label text as a default #107036

Closed
#107715
Closed
BottomNavigationBarItem's tooltip should not use the label text as a default#107036
#107715
Assignees
bleroux
Labels
P3Issues that are less important to the Flutter projecta: desktopRunning on desktopc: proposalA detailed proposal for a change to Flutterframeworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer version

Description

@ghost
ghost
opened on Jul 3, 2022

Flutter has some issues with tooltip for Windows Application. Tooltips are shown immediately on hover. That's annoying. On mobile you have to long press. Because you can't hover. We need some options or default behaviors.

  • The tooltip needs delay. Define an option with milliseconds or boolean between 0ms and 300ms (or some other good value).

  • Tooltips should not show the same state as the element where it comes from. For example: The BottomNavigationBarItem should not show a tooltip. The default behavior should be changed. It currently just shows the label. That's really bad UX. By default the tooltip's should be not shown. The FAB already works in this way. You have to specify the tooltip property to show it. Current workaround to suppress tooltips: Set tooltip to empty string.
    demo

  • Option to show tooltip only on long press as described in docs. Same behavior for Windows apps.

The text to display in the tooltip for this widget, when the user long presses the item.

It's a bad UX if everywhere floating tooltips. Especially if the tooltip is useless (same content).

Tested with Flutter 3.0.4 (stable) on Windows.

Activity

  1. huycozy
    added
    in triagePresently being triaged by the triage team
    on Jul 4, 2022

  2. huycozy commented on Jul 4, 2022

    @huycozy
    huycozy
    on Jul 4, 2022
    Member

    Hi @twoco, thanks for filing the issue.
    This issue also happens on Web and MacOS platforms.

    Demo
    Screen.Recording.2022-07-04.at.18.08.19.mov
    Sample code 
    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times: ',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            const TextField(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(currentIndex: 0, onTap: (int index) {}, items: const [
        BottomNavigationBarItem(label: "1", icon: Icon(Icons.circle), tooltip: ''),
        BottomNavigationBarItem(label: "2", icon: Icon(Icons.square)),
        BottomNavigationBarItem(label: "3", icon: Icon(Icons.accessible)),
      ]),
    );
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel stable, 3.0.4, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.0.4 at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 85684f9300 (3 days ago), 2022-06-30 13:22:47 -0700
    • Engine revision 6ba2af10bb
    • Dart version 2.17.5
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.app/Contents
    • 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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

[✓] VS Code (version 1.68.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.42.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 103.0.5060.53

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.
    [✓] Flutter (Channel master, 3.1.0-0.0.pre.1491, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.1.0-0.0.pre.1491 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c6ccf0df05 (2 hours ago), 2022-07-03 20:59:05 -0400
    • Engine revision d441d7964b
    • Dart version 2.18.0 (build 2.18.0-250.0.dev)
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13E113
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.app/Contents
    • 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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

[✓] VS Code (version 1.68.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.42.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 103.0.5060.53

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

    Labeling this issue as a proposal for further opinions/investigation from the team.

  3. huycozy
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    c: proposalA detailed proposal for a change to Flutter
    a: desktopRunning on desktop
    and removed
    in triagePresently being triaged by the triage team
    on Jul 4, 2022

  4. gspencergoog commented on Jul 7, 2022

    @gspencergoog
    gspencergoog
    on Jul 7, 2022
    Contributor

    This is "as designed". The Material UI spec specifies that there should be no delay when showing tooltips. The Tooltip widget itself does expose a waitDuration parameter to set the delay you are asking for, but it is zero by default in order to conform to the spec.

    We do agree, though, that it would be better if the BottomNavigationBar exposed Tooltip's waitDuration parameter (probably as tooltipWaitDuration or something), so if you would like to propose a PR to add that, we would consider it.

    (Desktop Triage)

  5. gspencergoog
    closed this as completedon Jul 7, 2022

  7. gspencergoog commented on Jul 7, 2022

    @gspencergoog
    gspencergoog
    on Jul 7, 2022
    Contributor

    Ahh, OK, let's make this issue just about modifying the behavior of BottomNavigationBarItem then.

    I agree with you that the default for BottomNavigationBarItem.tooltip is not ideal, so let's change the default to just not display a tooltip instead of displaying the label text.

  8. gspencergoog
    reopened this on Jul 7, 2022
  9. gspencergoog
    changed the title [-]Tooltip issues. (e.g. BottomNavigationBarItem no tooltip by default)[/-] [+]`BottomNavigationBarItem`'s `tooltip` should not use the `label` text as a default[/+] on Jul 7, 2022
  10. gspencergoog
    added
    P2Important issues not at the top of the work list
    P3Issues that are less important to the Flutter project
    and removed
    P2Important issues not at the top of the work list
    on Jul 7, 2022
  11. bleroux
    self-assigned this
    on Jul 15, 2022

  12. bleroux commented on Jul 15, 2022

    @bleroux
    bleroux
    on Jul 15, 2022
    Contributor

    @twoco Thank you for your interesting feedbacks on Flutter's tooltips.

    I filed a PR to fix the main issue reported here according to "so let's change the default to just not display a tooltip instead of displaying the label text".

    About the delay, there is a way to customize it using TooltipThemeData. This can be done for the entire application using ThemeData.tooltipTheme or on a subtree using TooltipTheme.

    Updated code sample using ThemeData.tooltipTheme 
    import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        tooltipTheme: const TooltipThemeData(
          waitDuration: Duration(milliseconds: 1000),
        ),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times: ',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            const TextField(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(currentIndex: 0, onTap: (int index) {}, items: const [
        BottomNavigationBarItem(label: "1", icon: Icon(Icons.circle), tooltip: ''),
        BottomNavigationBarItem(label: "2", icon: Icon(Icons.square), tooltip: 'A square :-)'),
        BottomNavigationBarItem(label: "3", icon: Icon(Icons.accessible)),
      ]),
    );
  }
}

    Is this what you were looking for? If yes, I will try to file a PR in order to improve the documentation and make this more discoverable.

  14. helinanever
    moved this to In progress in Nevercodeon Jul 18, 2022
  15. helinanever
    added this to Nevercodeon Jul 18, 2022
  16. bleroux
    moved this from In progress to PR submitted in Nevercodeon Jul 18, 2022
  17. bleroux
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Jul 21, 2022
  18. bleroux
    closed this as completedon Jul 21, 2022
  19. Repository owner moved this from PR submitted to Done (PR merged) in Nevercodeon Jul 21, 2022

  20. github-actions commented on Aug 4, 2022

    @github-actions
    github-actionsbot
    on Aug 4, 2022

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  21. github-actions
    locked as resolved and limited conversation to collaborators on Aug 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P3Issues that are less important to the Flutter projecta: desktopRunning on desktopc: proposalA detailed proposal for a change to Flutterframeworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer version

Type

No type

Projects

  • Nevercode
    Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions