155 lines
3.1 KiB
CSS
155 lines
3.1 KiB
CSS
.tooltipContainer {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
.tooltip {
|
|
padding: var(--Spacing-x1);
|
|
background-color: var(--UI-Text-Active);
|
|
border: 0.5px solid var(--UI-Border-Active);
|
|
border-radius: var(--Corner-radius-Medium);
|
|
color: var(--Base-Text-Inverted);
|
|
position: absolute;
|
|
visibility: hidden;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
max-width: 200px;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.tooltipContainer:hover .tooltip {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.left {
|
|
right: 100%;
|
|
}
|
|
|
|
.right {
|
|
left: 100%;
|
|
}
|
|
|
|
.top {
|
|
bottom: calc(100% + 8px);
|
|
}
|
|
|
|
.bottom {
|
|
top: calc(100% + 8px);
|
|
}
|
|
|
|
.bottom.arrowRight {
|
|
right: 0;
|
|
}
|
|
|
|
.tooltip::before {
|
|
content: "";
|
|
position: absolute;
|
|
border-style: solid;
|
|
}
|
|
|
|
.bottom.arrowLeft::before {
|
|
top: -8px;
|
|
left: 16px;
|
|
border-width: 0 7px 8px 7px;
|
|
border-color: transparent transparent var(--UI-Text-Active) transparent;
|
|
}
|
|
|
|
.bottom.arrowCenter::before {
|
|
top: -8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-width: 0 7px 8px 7px;
|
|
border-color: transparent transparent var(--UI-Text-Active) transparent;
|
|
}
|
|
|
|
.bottom.arrowRight::before {
|
|
top: -8px;
|
|
right: 16px;
|
|
border-width: 0 7px 8px 7px;
|
|
border-color: transparent transparent var(--UI-Text-Active) transparent;
|
|
}
|
|
|
|
.top.arrowLeft::before {
|
|
bottom: -8px;
|
|
left: 16px;
|
|
border-width: 8px 7px 0 7px;
|
|
border-color: var(--UI-Text-Active) transparent transparent transparent;
|
|
}
|
|
|
|
.top.arrowCenter::before {
|
|
bottom: -8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-width: 8px 7px 0 7px;
|
|
border-color: var(--UI-Text-Active) transparent transparent transparent;
|
|
}
|
|
|
|
.top.arrowRight::before {
|
|
bottom: -8px;
|
|
right: 16px;
|
|
border-width: 8px 7px 0 7px;
|
|
border-color: var(--UI-Text-Active) transparent transparent transparent;
|
|
}
|
|
|
|
.left.arrowTop::before {
|
|
top: 16px;
|
|
right: -8px;
|
|
transform: translateY(-50%);
|
|
border-width: 7px 0 7px 8px;
|
|
border-color: transparent transparent transparent var(--UI-Text-Active);
|
|
}
|
|
|
|
.left.arrowCenter::before {
|
|
top: 50%;
|
|
right: -8px;
|
|
transform: translateY(-50%);
|
|
border-width: 7px 0 7px 8px;
|
|
border-color: transparent transparent transparent var(--UI-Text-Active);
|
|
}
|
|
|
|
.left.arrowBottom::before {
|
|
bottom: 16px;
|
|
right: -8px;
|
|
transform: translateY(50%);
|
|
border-width: 7px 0 7px 8px;
|
|
border-color: transparent transparent transparent var(--UI-Text-Active);
|
|
}
|
|
|
|
.right.arrowTop::before {
|
|
top: 16px;
|
|
left: -8px;
|
|
transform: translateY(-50%);
|
|
border-width: 7px 8px 7px 0;
|
|
border-color: transparent var(--UI-Text-Active) transparent transparent;
|
|
}
|
|
|
|
.right.arrowCenter::before {
|
|
top: 50%;
|
|
left: -8px;
|
|
transform: translateY(-50%);
|
|
border-width: 7px 8px 7px 0;
|
|
border-color: transparent var(--UI-Text-Active) transparent transparent;
|
|
}
|
|
|
|
.right.arrowBottom::before {
|
|
bottom: 16px;
|
|
left: -8px;
|
|
transform: translateY(50%);
|
|
border-width: 7px 8px 7px 0;
|
|
border-color: transparent var(--UI-Text-Active) transparent transparent;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.tooltipContainer[data-active="true"] .tooltip {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.tooltipContainer[data-active="false"] .tooltip {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
}
|