zarm/es/tooltip/style/index.css

基于 React 的移动端UI库

.za-tooltip {
  --font-size: var(--za-tooltip-font-size, 12px);
  --color: var(--za-tooltip-color, var(--za-color-text-inverse));
  --background: var(--za-tooltip-background, rgba(0, 0, 0, 0.8));
  --zindex: var(--za-tooltip-zindex, 1700);
  --spacing: var(--za-tooltip-spacing, 3px);
  --padding-vertical: var(--za-tooltip-padding-vertical, var(--za-padding-v-xs));
  --padding-horizontal: var(--za-tooltip-padding-horizontal, var(--za-padding-h-xs));
  --arrow-size: var(--za-tooltip-arrow-size, 4px);
  --arrow-horizontal-offset: var(--za-tooltip-arrow-horizontal-offset, 10px);
  --arrow-vertical-offset: var(--za-tooltip-arrow-vertical-offset, 6px);
  padding: var(--padding-vertical) var(--padding-horizontal);
  background: var(--background);
  border-radius: 4px;
  font-size: var(--font-size);
  color: var(--color);
  z-index: var(--zindex);
}
.za-tooltip[data-popper-placement^=right] {
  margin-left: var(--spacing);
}
.za-tooltip[data-popper-placement^=right] .za-popper__arrow {
  left: calc(var(--arrow-size) * -1);
  border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;
  border-right-color: var(--background);
}

.za-tooltip[data-popper-placement^=top] {
  margin-top: calc(var(--spacing) * -1);
}
.za-tooltip[data-popper-placement^=top] .za-popper__arrow {
  bottom: calc(var(--arrow-size) * -1);
  border-width: var(--arrow-size) var(--arrow-size) 0;
  border-top-color: var(--background);
}

.za-tooltip[data-popper-placement^=bottom] {
  margin-top: var(--spacing);
}
.za-tooltip[data-popper-placement^=bottom] .za-popper__arrow {
  top: calc(var(--arrow-size) * -1);
  border-width: 0 var(--arrow-size) var(--arrow-size) var(--arrow-size);
  border-bottom-color: var(--background);
}

.za-tooltip[data-popper-placement^=left] {
  margin-left: calc(var(--spacing) * -1);
}
.za-tooltip[data-popper-placement^=left] .za-popper__arrow {
  right: calc(var(--arrow-size) * -1);
  border-width: var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);
  border-left-color: var(--background);
}

.za-tooltip[data-popper-placement=top-start] .za-popper__arrow, .za-tooltip[data-popper-placement=bottom-start] .za-popper__arrow {
  left: var(--arrow-horizontal-offset);
}

.za-tooltip[data-popper-placement=top-end] .za-popper__arrow, .za-tooltip[data-popper-placement=bottom-end] .za-popper__arrow {
  right: var(--arrow-horizontal-offset);
}

.za-tooltip[data-popper-placement=left-start] .za-popper__arrow, .za-tooltip[data-popper-placement=right-start] .za-popper__arrow {
  top: var(--arrow-vertical-offset);
}

.za-tooltip[data-popper-placement=left-end] .za-popper__arrow, .za-tooltip[data-popper-placement=right-end] .za-popper__arrow {
  bottom: var(--arrow-vertical-offset);
}

.za-tooltip .za-popper__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}