@alicloud/cloud-charts
Version:
43 lines • 1.21 kB
CSS
.cloud-tooltip-container {
padding: 6px 12px;
border-radius: 2px;
border: 1px solid var(--widgets-tooltip-cross-line, #d9d9d9);
z-index: 1001;
background-color: var(--widgets-color-background, #ffffff);
max-width: 500px;
}
.cloud-tooltip-container .cloud-tooltip-arrow {
display: block;
left: calc(50% - 8px);
top: -16px;
width: 16px;
height: 16px;
overflow: hidden;
pointer-events: none;
}
.cloud-tooltip-container .cloud-tooltip-arrow-bottom {
top: -16px;
}
.cloud-tooltip-container .cloud-tooltip-arrow-top {
top: 100%;
}
.cloud-tooltip-container .cloud-tooltip-arrow-content {
margin: 4px;
content: "";
width: 8px;
height: 8px;
border: 1px solid var(--widgets-tooltip-cross-line, #d9d9d9);
background-color: var(--widgets-color-background, #ffffff);
pointer-events: none;
}
.cloud-tooltip-container .cloud-tooltip-arrow-content-bottom {
transform: translateY(8px) rotate(45deg);
}
.cloud-tooltip-container .cloud-tooltip-arrow-content-top {
transform: translateY(-8px) rotate(-45deg);
}
.cloud-tooltip-container .cloud-tooltip-content {
word-break: keep-all;
color: var(--widgets-color-text-2, #696969);
font-size: var(--widgets-font-size-1, 12px);
}