1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-11 08:06:13 +01:00
phorge-phorge/webroot/rsrc/css/aphront/tooltip.css
epriestley ea6d2afa86 Fix flickering tooltips in Chrome when the tip container overlaps the triggering element
Summary:
Fixes T8440. See that task for discussion.

Ref T13216. See PHI976.

Test Plan:
In Chrome, hovered a timestamp and moved the mouse up to the "overlap" area (see T8440). Before: flickered like crazy. After: no flickering.

(I couldn't reproduce the original issue in modern Firefox or Safari.)

Reviewers: amckinley, avivey

Reviewed By: avivey

Maniphest Tasks: T8440, T13216

Differential Revision: https://secure.phabricator.com/D19808
2018-11-15 10:43:55 -08:00

108 lines
1.9 KiB
CSS

/**
* @provides aphront-tooltip-css
*/
.jx-tooltip-container {
position: absolute;
padding: 5px;
/* In Chrome, moving the cursor into the empty space next to the "caret" on
the caret side of the tooltip can cause the tooltip to flicker rapidly
because the cursor hits the container. To stop this, prevent cursor
events on the container. See T8440. */
pointer-events: none;
}
.jx-tooltip-appear {
animation: 0.5s tooltip-appear;
/* Without this, there's a nasty pop-in effect at the end of the animation
when Safari changes font smoothing. The text becomes visibly more bold
after the last frame of animation. */
-webkit-font-smoothing: subpixel-antialiased;
}
@keyframes tooltip-appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.jx-tooltip-hidden {
opacity: 0;
}
.jx-tooltip-inner {
position: relative;
background: #000;
border-radius: 3px;
}
.jx-tooltip {
color: #fff;
font-size: {$normalfontsize};
-webkit-font-smoothing: antialiased;
font-weight: bold;
padding: 6px 8px;
overflow: hidden;
white-space: pre-wrap;
}
.jx-tooltip:after {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba({$alphablack}, 0);
border-width: 5px;
}
.jx-tooltip-align-E {
margin-left: 5px;
}
.jx-tooltip-align-E .jx-tooltip:after {
margin-top: -5px;
border-right-color: #000;
right: 100%;
top: 50%;
}
.jx-tooltip-align-E {
margin-right: 5px;
}
.jx-tooltip-align-W .jx-tooltip:after {
margin-top: -5px;
border-left-color: #000;
left: 100%;
top: 50%;
}
.jx-tooltip-align-N {
margin-bottom: 5px;
}
.jx-tooltip-align-N .jx-tooltip:after {
margin-left: -5px;
border-top-color: #000;
top: 100%;
left: 50%;
}
.jx-tooltip-align-N {
margin-top: 5px;
}
.jx-tooltip-align-S .jx-tooltip:after {
margin-left: -5px;
border-bottom-color: #000;
bottom: 100%;
left: 50%;
}