yu.css.ui/css/component/tooltip.css

纯CSS通用UI模块和组件

.yu-tooltip {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  position: relative;
  display: inline-block; }
  .yu-tooltip.light > [data-tooltip]:before {
    background-color: #fff;
    color: #606266;
    border: 1px solid #E4E7ED; }
  .yu-tooltip.light > [data-tooltip]:after {
    background-color: #fff;
    border-right: 1px solid #E4E7ED;
    border-bottom: 1px solid #E4E7ED; }
  .yu-tooltip > [data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    display: block;
    padding: 0 14px;
    height: 32px;
    line-height: 32px;
    background-color: #373737;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    visibility: hidden;
    z-index: 1000;
    white-space: nowrap; }
  .yu-tooltip > [data-tooltip]:after {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    background-color: #373737;
    position: absolute;
    transform: rotate(45deg);
    visibility: hidden;
    z-index: 1000; }
  .yu-tooltip:hover:not(.active-control) > [data-tooltip]:before, .yu-tooltip.active > [data-tooltip]:before {
    visibility: visible; }
  .yu-tooltip:hover:not(.active-control) > [data-tooltip]:after, .yu-tooltip.active > [data-tooltip]:after {
    visibility: visible; }
  .yu-tooltip.top-left > [data-tooltip]:before {
    top: -46px;
    left: 0; }
  .yu-tooltip.top-left > [data-tooltip]:after {
    top: -18px;
    left: 14px; }
  .yu-tooltip.top-center > [data-tooltip]:before {
    top: -46px;
    left: 50%;
    transform: translate(-50%, 0); }
  .yu-tooltip.top-center > [data-tooltip]:after {
    top: -18px;
    left: 50%;
    transform: translate(-4px, 0) rotate(45deg); }
  .yu-tooltip.top-right > [data-tooltip]:before {
    top: -46px;
    right: 0; }
  .yu-tooltip.top-right > [data-tooltip]:after {
    top: -18px;
    right: 22px; }
  .yu-tooltip.right-top > [data-tooltip]:before {
    top: 0;
    left: 100%;
    transform: translate(14px, 0); }
  .yu-tooltip.right-top > [data-tooltip]:after {
    top: 6px;
    left: 100%;
    transform: translate(10px, 0) rotate(45deg); }
  .yu-tooltip.right-center > [data-tooltip]:before {
    top: 50%;
    left: 100%;
    transform: translate(14px, -50%); }
  .yu-tooltip.right-center > [data-tooltip]:after {
    top: 50%;
    left: 100%;
    transform: translate(10px, -4px) rotate(45deg); }
  .yu-tooltip.right-bottom > [data-tooltip]:before {
    top: 100%;
    left: 100%;
    transform: translate(14px, -32px); }
  .yu-tooltip.right-bottom > [data-tooltip]:after {
    top: 100%;
    left: 100%;
    transform: translate(10px, -14px) rotate(45deg); }
  .yu-tooltip.bottom-left > [data-tooltip]:before {
    bottom: -46px;
    left: 0; }
  .yu-tooltip.bottom-left > [data-tooltip]:after {
    bottom: -18px;
    left: 14px; }
  .yu-tooltip.bottom-center > [data-tooltip]:before {
    bottom: -46px;
    left: 50%;
    transform: translate(-50%, 0); }
  .yu-tooltip.bottom-center > [data-tooltip]:after {
    bottom: -18px;
    left: 50%;
    transform: translate(-4px, 0) rotate(45deg); }
  .yu-tooltip.bottom-right > [data-tooltip]:before {
    bottom: -46px;
    right: 0; }
  .yu-tooltip.bottom-right > [data-tooltip]:after {
    bottom: -18px;
    right: 22px; }
  .yu-tooltip.left-top > [data-tooltip]:before {
    top: 0;
    right: 100%;
    transform: translate(-14px, 0); }
  .yu-tooltip.left-top > [data-tooltip]:after {
    top: 6px;
    right: 100%;
    transform: translate(-10px, 0) rotate(45deg); }
  .yu-tooltip.left-center > [data-tooltip]:before {
    top: 50%;
    right: 100%;
    transform: translate(-14px, -50%); }
  .yu-tooltip.left-center > [data-tooltip]:after {
    top: 50%;
    right: 100%;
    transform: translate(-10px, -4px) rotate(45deg); }
  .yu-tooltip.left-bottom > [data-tooltip]:before {
    top: 100%;
    right: 100%;
    transform: translate(-14px, -32px); }
  .yu-tooltip.left-bottom > [data-tooltip]:after {
    top: 100%;
    right: 100%;
    transform: translate(-10px, -14px) rotate(45deg); }