Skip to content

Commit 4b29012

Browse files
authored
Implement Tooltip (#68)
* Implement tooltip * Bump version and update readme * Format files * Fixed typo
1 parent 6673be2 commit 4b29012

File tree

7 files changed

+680
-5
lines changed

7 files changed

+680
-5
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
## [0.0.12]
2+
* Implement `Tooltip`
23
* Add mouse cursors to help button, push button and `TextField`
34

45
## [0.0.11]

README.md

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Flutter widgets and themes implementing the current macOS design language.
1616
- [RadioButton](#radiobutton)
1717
- [PushButton](#pushbutton)
1818
- [Switch](#switch)
19-
- [Fields and Labels](#fields-and-labels)
19+
- [Fields](#fields)
2020
- [TextField](#textfield)
2121
- [Indicators](#indicators)
2222
- [Progress Indicators](#progress-indicators)
@@ -156,7 +156,7 @@ Switch(
156156
),
157157
```
158158

159-
# Fields and Labels
159+
# Fields
160160

161161
## TextField
162162

@@ -170,6 +170,27 @@ Here's an example of how to create a basic text field:
170170
TextField(),
171171
```
172172

173+
# Labels
174+
175+
Labels are a short description of what an element on the screen does.
176+
177+
## Tooltip
178+
179+
Tooltips succinctly describe how to use controls without shifting people’s focus away from the primary interface. Help tags appear when the user positions the pointer over a control for a few seconds. A tooltip remains visible for 10 seconds, or until the pointer moves away from the control.
180+
181+
![Tooltip Example](https://developer.apple.com/design/human-interface-guidelines/macos/images/help_Tooltip.png)
182+
183+
To create a tooltip, wrap any widget on a `Tooltip`:
184+
185+
```dart
186+
Tooltip(
187+
message: 'This is a tooltip',
188+
child: Text('Hover or long press to show a tooltip'),
189+
),
190+
```
191+
192+
You can customize the tooltip the way you want using its `style` property. A tooltip automatically adapts to its environment, responding to touch and pointer events.
193+
173194
# Indicators
174195

175196
## Progress Indicators

example/lib/main.dart

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,11 @@ class _DemoState extends State<Demo> {
7171
onChanged: (v) => setState(() => value = v),
7272
),
7373
SizedBox(height: 20),
74-
HelpButton(
75-
onPressed: () {},
74+
Tooltip(
75+
message: 'This button shows help',
76+
child: HelpButton(
77+
onPressed: () {},
78+
),
7679
),
7780
SizedBox(height: 20),
7881
CapacityIndicator(

lib/macos_ui.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export 'src/indicators/capacity_indicators.dart';
2121
export 'src/indicators/progress_indicators.dart';
2222
export 'src/indicators/rating_indicator.dart';
2323
export 'src/indicators/relevance_indicator.dart';
24+
export 'src/labels/tooltip.dart';
2425
export 'src/layout/content_area.dart';
2526
export 'src/layout/resizable_pane.dart';
2627
export 'src/layout/scaffold.dart';

0 commit comments

Comments
 (0)