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.

Sign up for GitHub

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

Responsive tooltips #767

Closed
wants to merge 3 commits into from
Closed

Responsive tooltips #767

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f0da6b7
Hide tooltips when primary input mechanism cannot hover
simurai Apr 24, 2019
cbbe7d0
Add option to still allow tooltips for touch input
simurai Apr 24, 2019
4ea261b
Add documentation
simurai Apr 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions pages/css/components/tooltips.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,3 +118,22 @@ By default the tooltips have a slight delay before appearing. This is to keep mu
</span>
</div>
```

## Tooltips for touch input

**Note**: We hide tooltips when the primary input mechanism cannot hover. For example on mobile phones or tablets where the primary input method is touch.

Use the `tooltipped-touch` modifier class to enable tooltips also for touch input. Most mobile browsers mimick hovering by tapping once. Try to avoid using tooltips on mobile where a user performs a certain action (buttons, links), because the tooltip will only show up after the action already happened.

```html
<div>
<span class="tooltipped tooltipped-e d-inline-block border p-2" aria-label="Hidden on mobile">
.tooltipped
</span>
</div>
<div class="mt-3">
<span class="tooltipped tooltipped-touch tooltipped-n d-inline-block border p-2" aria-label="Shows on mobile">
.tooltipped .tooltipped-touch
</span>
</div>
```
13 changes: 13 additions & 0 deletions src/tooltips/tooltips.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,3 +277,16 @@
}
}
}

// Responsive tooltips
//
// Hide tooltips when primary input mechanism cannot hover (default)
// Enable tooltips for touch input with .tooltipped-touch
@media (hover: none) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

There is also the any-hover media query which might be useful for these hybrid devices (laptops that have a touch screen and mouse). But I don't have any device to test that. 😉 Also not sure if "One or more available input mechanism" is that helpful, instead it should be "the currently in use input method" so that you can switch between a mouse and touch screen whenever. 🤔

.tooltipped:not(.tooltipped-touch):hover {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Is .tooltipped-touch a good modifier class name? Or should it be more descriptive .tooltipped-show-on-touch .tooltipped-force-hover???

&::before,
&::after {
display: none;
}
}
}