Open Linkaaaaa opened 2 weeks ago
Quick CSS pseudo-element based tooltips for anything with a title
attribute.
[title] {
position: relative;
}
[title]::before, [title]::after {
position: absolute;
left: 50%;
opacity: 0;
transition: .2s opacity;
z-index: 100;
pointer-events: none;
}
[title]:hover::before, [title]:hover::after {
opacity: 1;
}
[title]::after {
content: attr(title);
top: 0;
padding: 0.25rem 0.5rem;
background-color: #000;
border-radius: 0.25rem;
color: #fff;
text-align: center;
transform: translate3d(-50%, -100%, 0);
}
[title]::before {
content: "";
top: 0;
margin-left: -0.4rem;
border-style: solid;
border-width: 0.4rem 0.4rem 0;
border-color: transparent;
border-top-color: #000;
}
Problems:
overflow: hidden
on the parent (we have that e.g. on player names)
We currently use 2 types of tooltips, ideally we would use one that is the same for everything. They should work similarly to the bootstrap one but they need to handle moving/disappearing elements for the combat replay section.