7a8a4c32f4
When data is coming in live, the tooltip can get bogged down by updates causing the tooltip to never make it under the mouse, which looks like either lag or a bug.
105 lines
1.9 KiB
SCSS
105 lines
1.9 KiB
SCSS
.chart {
|
|
position: relative;
|
|
|
|
.chart-tooltip {
|
|
position: absolute;
|
|
top: 0;
|
|
display: none;
|
|
background: $white;
|
|
color: rgba($black, 0.6);
|
|
border: 1px solid $grey;
|
|
min-width: 150px;
|
|
margin-top: -10px;
|
|
transform: translate(-50%, -100%);
|
|
transition: 0.2s top ease-out, 0.2s left ease-out;
|
|
pointer-events: none;
|
|
z-index: $z-tooltip;
|
|
|
|
&.is-snappy {
|
|
transition: 0.2s top ease-out, 0.05s left ease-out;
|
|
}
|
|
|
|
&::before {
|
|
pointer-events: none;
|
|
display: inline-block;
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 7px solid $grey;
|
|
border-right: 7px solid transparent;
|
|
border-left: 7px solid transparent;
|
|
position: absolute;
|
|
transform: translateX(-7px);
|
|
left: 50%;
|
|
bottom: -8px;
|
|
z-index: $z-tooltip;
|
|
}
|
|
|
|
&::after {
|
|
pointer-events: none;
|
|
display: inline-block;
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 6px solid $white;
|
|
border-right: 6px solid transparent;
|
|
border-left: 6px solid transparent;
|
|
position: absolute;
|
|
transform: translateX(-6px);
|
|
left: 50%;
|
|
bottom: -6px;
|
|
z-index: $z-tooltip;
|
|
}
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
|
|
ol {
|
|
list-style: none;
|
|
}
|
|
|
|
ol > li,
|
|
p {
|
|
display: flex;
|
|
flex-flow: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
padding: 0.25rem 0.5rem;
|
|
|
|
span {
|
|
display: inline-block;
|
|
}
|
|
|
|
.label {
|
|
font-weight: $weight-bold;
|
|
color: $black;
|
|
margin: 0;
|
|
|
|
&.is-empty {
|
|
color: rgba($grey, 0.6);
|
|
}
|
|
}
|
|
}
|
|
|
|
ol > li {
|
|
.label {
|
|
color: rgba($black, 0.6);
|
|
}
|
|
|
|
&.active {
|
|
color: $black;
|
|
background: $white-ter;
|
|
|
|
.label {
|
|
color: $black;
|
|
}
|
|
}
|
|
|
|
+ li {
|
|
border-top: 1px solid $grey-light;
|
|
}
|
|
}
|
|
}
|
|
}
|