mirror of https://github.com/zulip/zulip.git
tooltip: Hide tooltip for touch events on touch-enabled devices.
Fixes #16674. The commit hides the tooltip for touch events on touch enabled device. Touch events trigger both click and hover action, leaving the hover action sustained until next click. Hence it is better to hide the tooltip to avoid the clutter in UI.
This commit is contained in:
parent
e271936aae
commit
3dcf97bf27
|
@ -536,6 +536,23 @@ strong {
|
||||||
background-color: hsla(0, 0%, 7%, 0.8);
|
background-color: hsla(0, 0%, 7%, 0.8);
|
||||||
padding: 3px 5px;
|
padding: 3px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Since hover and click are activated together on touchscreen
|
||||||
|
devices, the hover state persists until the next click, creating
|
||||||
|
awkward UI where the tooltip sticks around forever :(.
|
||||||
|
|
||||||
|
To resolve this, we just hide the tooltip for touch-events on
|
||||||
|
touch-enabled devices resolving the above problem. This means
|
||||||
|
that tooltips will never appear on touchscreen devices, but that's
|
||||||
|
probably a reasoanble tradeoff here.
|
||||||
|
|
||||||
|
Source: https://drafts.csswg.org/mediaqueries-4/#mf-interaction
|
||||||
|
*/
|
||||||
|
|
||||||
|
@media (hover: none) {
|
||||||
|
visibility: hidden !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.buddy_list_tooltip_content {
|
.buddy_list_tooltip_content {
|
||||||
|
|
Loading…
Reference in New Issue