fix: keep bay tooltips on screen and out of the accessible name
This commit is contained in:
@@ -579,13 +579,21 @@ html .drive-control-button svg { inline-size: 18px; block-size: 18px; }
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Tooltips and the settings popover open downward from the beam. */
|
/* Tooltips and the settings popover open downward from the beam. */
|
||||||
|
/* Tooltips hang from the button's right edge so the last one never leaves
|
||||||
|
the viewport; the label is decorative (the button has its aria-label). */
|
||||||
html .drive-control-button::after {
|
html .drive-control-button::after {
|
||||||
inset: calc(100% + 0.5rem) auto auto 50%;
|
content: attr(data-tooltip) / '';
|
||||||
transform: translate(-50%, -4px);
|
inset: calc(100% + 0.5rem) 0 auto auto;
|
||||||
|
transform: translateY(-4px);
|
||||||
}
|
}
|
||||||
html .drive-control-button:hover::after,
|
html .drive-control-button:hover::after,
|
||||||
html .drive-control-button:focus-visible::after {
|
html .drive-control-button:focus-visible::after {
|
||||||
transform: translate(-50%, 0);
|
transform: none;
|
||||||
|
}
|
||||||
|
/* An open popover is its own label; touch screens get no hover labels. */
|
||||||
|
html .drive-control-button[aria-expanded='true']::after { display: none; }
|
||||||
|
@media (hover: none) {
|
||||||
|
html .drive-control-button::after { display: none; }
|
||||||
}
|
}
|
||||||
html .drive-popover {
|
html .drive-popover {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Reference in New Issue
Block a user