zent/css/tooltip.css

一套前端设计语言和基于React的实现

.zent-tooltip-v2 {
  font-size: 14px;
  line-height: 20px;
  background-color: #333;
  background-color: var(--theme-title-color, var(--theme-stroke-1, #333));
  border-radius: 2px;
  z-index: 2000;
}
.zent-tooltip-v2 .zent-tooltip-v2-inner {
  background-color: #333;
  background-color: var(--theme-title-color, var(--theme-stroke-1, #333));
  color: #fff;
  color: var(--theme-section-bg, var(--theme-stroke-9, #fff));
  position: relative;
  border-radius: 2px;
  padding: 2px 6px;
  z-index: 2;
}
.zent-tooltip-v2 .zent-tooltip-v2-arrow {
  background-color: #333;
  background-color: var(--theme-title-color, var(--theme-stroke-1, #333));
  position: absolute;
  z-index: 1;
  width: var(--CSS_ARROW_SIZE);
  height: var(--CSS_ARROW_SIZE);
  overflow: hidden;
}
.zent-tooltip-v2::after {
  content: "";
  display: block;
  position: absolute;
  width: var(--CSS_ARROW_COVER_SIZE);
  height: var(--CSS_ARROW_COVER_SIZE);
}
.zent-tooltip-v2.zent-popover-v2-position-bottom-left .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-bottom-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-bottom-right .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-bottom-left .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-bottom-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-bottom-right .zent-tooltip-v2-arrow {
  top: 0;
}
.zent-tooltip-v2.zent-popover-v2-position-bottom-left::after, .zent-tooltip-v2.zent-popover-v2-position-bottom-center::after, .zent-tooltip-v2.zent-popover-v2-position-bottom-right::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-bottom-left::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-bottom-center::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-bottom-right::after {
  top: -var(--CSS_ARROW_COVER_SIZE);
  width: 100%;
  left: 0;
}
.zent-tooltip-v2.zent-popover-v2-position-bottom-left .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-bottom-left .zent-tooltip-v2-arrow {
  transform: translateY(-50%) rotate(45deg);
  left: var(--CSS_ARROW_OFFSET_HORIZONTAL);
}
.zent-tooltip-v2.zent-popover-v2-position-bottom-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-bottom-center .zent-tooltip-v2-arrow {
  transform: translate(-50%, -50%) rotate(45deg);
  left: 50%;
}
.zent-tooltip-v2.zent-popover-v2-position-bottom-right .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-bottom-right .zent-tooltip-v2-arrow {
  transform: translateY(-50%) rotate(45deg);
  right: var(--CSS_ARROW_OFFSET_HORIZONTAL);
}
.zent-tooltip-v2.zent-popover-v2-position-top-left .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-top-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-top-right .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-top-left .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-top-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-top-right .zent-tooltip-v2-arrow {
  bottom: 0;
}
.zent-tooltip-v2.zent-popover-v2-position-top-left::after, .zent-tooltip-v2.zent-popover-v2-position-top-center::after, .zent-tooltip-v2.zent-popover-v2-position-top-right::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-top-left::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-top-center::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-top-right::after {
  bottom: -var(--CSS_ARROW_COVER_SIZE);
  width: 100%;
  left: 0;
}
.zent-tooltip-v2.zent-popover-v2-position-top-left .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-top-left .zent-tooltip-v2-arrow {
  transform: translateY(50%) rotate(45deg);
  left: var(--CSS_ARROW_OFFSET_HORIZONTAL);
}
.zent-tooltip-v2.zent-popover-v2-position-top-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-top-center .zent-tooltip-v2-arrow {
  transform: translate(-50%, 50%) rotate(45deg);
  left: 50%;
}
.zent-tooltip-v2.zent-popover-v2-position-top-right .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-top-right .zent-tooltip-v2-arrow {
  transform: translateY(50%) rotate(45deg);
  right: var(--CSS_ARROW_OFFSET_HORIZONTAL);
}
.zent-tooltip-v2.zent-popover-v2-position-left-top .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-left-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-left-bottom .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-left-top .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-left-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-left-bottom .zent-tooltip-v2-arrow {
  right: 0;
}
.zent-tooltip-v2.zent-popover-v2-position-left-top::after, .zent-tooltip-v2.zent-popover-v2-position-left-center::after, .zent-tooltip-v2.zent-popover-v2-position-left-bottom::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-left-top::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-left-center::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-left-bottom::after {
  right: -var(--CSS_ARROW_COVER_SIZE);
  height: 100%;
  top: 0;
}
.zent-tooltip-v2.zent-popover-v2-position-left-top .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-left-top .zent-tooltip-v2-arrow {
  transform: translateX(50%) rotate(45deg);
  top: var(--CSS_ARROW_OFFSET_VERTICAL);
}
.zent-tooltip-v2.zent-popover-v2-position-left-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-left-center .zent-tooltip-v2-arrow {
  transform: translate(50%, -50%) rotate(45deg);
  top: 50%;
}
.zent-tooltip-v2.zent-popover-v2-position-left-bottom .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-left-bottom .zent-tooltip-v2-arrow {
  transform: translateX(50%) rotate(45deg);
  bottom: var(--CSS_ARROW_OFFSET_VERTICAL);
}
.zent-tooltip-v2.zent-popover-v2-position-right-top .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-right-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-right-bottom .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-right-top .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-right-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-right-bottom .zent-tooltip-v2-arrow {
  left: 0;
}
.zent-tooltip-v2.zent-popover-v2-position-right-top::after, .zent-tooltip-v2.zent-popover-v2-position-right-center::after, .zent-tooltip-v2.zent-popover-v2-position-right-bottom::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-right-top::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-right-center::after, .zent-tooltip-v2.zent-popover-v2-position-arrow-right-bottom::after {
  left: -var(--CSS_ARROW_COVER_SIZE);
  height: 100%;
  top: 0;
}
.zent-tooltip-v2.zent-popover-v2-position-right-top .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-right-top .zent-tooltip-v2-arrow {
  transform: translateX(-50%) rotate(45deg);
  top: var(--CSS_ARROW_OFFSET_VERTICAL);
}
.zent-tooltip-v2.zent-popover-v2-position-right-center .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-right-center .zent-tooltip-v2-arrow {
  transform: translate(-50%, -50%) rotate(45deg);
  top: 50%;
}
.zent-tooltip-v2.zent-popover-v2-position-right-bottom .zent-tooltip-v2-arrow, .zent-tooltip-v2.zent-popover-v2-position-arrow-right-bottom .zent-tooltip-v2-arrow {
  transform: translateX(-50%) rotate(45deg);
  bottom: var(--CSS_ARROW_OFFSET_VERTICAL);
}