Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add custom tooltips to toolbar buttons #1214

Merged
merged 4 commits into from
Feb 27, 2019
Merged

Add custom tooltips to toolbar buttons #1214

merged 4 commits into from
Feb 27, 2019

Conversation

mirka
Copy link
Member

@mirka mirka commented Feb 19, 2019

These custom tooltips are a small usability enhancement over the current built-in title tooltips.

tooltip

Benefits:

  1. We can control the delay to be shorter than the built-in tooltips. (I've set it to 200ms)
  2. We can add hints for shortcuts to aid discovery. Many users had requested a shortcut for the Markdown Preview button, which already existed but was near impossible to discover.

Related: #700 #985

@mirka mirka mentioned this pull request Feb 20, 2019
@mirka mirka changed the title [WIP] Add custom tooltips to toolbar buttons Add custom tooltips to toolbar buttons Feb 20, 2019
@mirka mirka requested a review from roundhill February 20, 2019 17:02
Copy link
Contributor

@roundhill roundhill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems great, I like the 200ms delay. One UI thought, the tooltip appears quite a bit lower than tooltips in other apps, maybe it can be moved up a bit to be a bit closer to the button?

Simplenote:
screen shot 2019-02-26 at 2 38 44 pm

Slack:
screen shot 2019-02-26 at 2 41 52 pm

<IconButton icon={<MenuIcon />} onClick={onToggleNavigation} title="Menu" />
<IconButton
icon={<MenuIcon />}
disableTooltip={true}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you disable it for the menu button?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was under the impression that it was a standard Material design pattern to disable tooltips on the hamburger button, but I did a little more research today and it doesn't really seem to be the case 🤔 (There's even variance in Google's own apps!)

I'm going to remove this logic to keep it simple. Thanks!

@mirka mirka merged commit a43e935 into master Feb 27, 2019
@mirka mirka deleted the feature/tooltips branch February 27, 2019 19:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants