drip-ui/packages/drip-css/src/tooltip.css

Lightweight Mobile UI Components built on Vue

.risk-desc{
  height: auto;
  display: inline-block;
  &-visible{
    display: none;
  }
  &-wrap{
    position: relative;
    &-transition {
      z-index: 2000;
    }
  }
  &-iconSize{
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    & > img {
      width: 32px;
      display: inline-block;
    }
  }
  &-icon{
    left: 0;
    bottom: 0;
    position: absolute;
    width: 0;
    height: 0;
    border-width: 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent #fff;
    z-index: 2001;
    &-top {
      top: -26px;
      left: 50%;
      transform: translate3d(-50%, 0, 0) rotate(180deg);
    }
    &-right {
      top: 50%;
      right: -26px;
      transform: translate3d(100%, -50%, 0) rotate(-90deg);
      bottom: auto;
      left: auto;
    }
    &-bottom {
      bottom: -26px;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
    }
    &-left {
      top: 50%;
      left: -32px;
      
      transform: translate3d(0, -50%, 0) rotate(90deg);
      bottom: auto;
    }
  }
  &-container {
    min-width: 200px;
    max-width: calc(750px - 40px);
    height: auto;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    z-index: 2000;
    border-radius: 8px;
    overflow: hidden;
    &-text{
      width: 100%;
      position: relative;
    }
    &-top {
      top: -26px;
      left: 50%;
      transform: translate3d(-50%, -100%, 0);
    }
    &-right {
      top: 50%;
      right: -26px;
      transform: translate3d(100%, -50%, 0);
      bottom: auto;
    }
    &-bottom {
      bottom: -26px;
      left: 50%;
      transform: translate3d(-50%, 100%, 0);
    }
    &-left {
      top: 50%;
      left: -26px;
      transform: translate3d(-100%, -50%, 0);
      bottom: auto;
    }
  }
  .tooltip-enter-active, .tooltip-leave-active {
    transition: opacity .5s;
  }
  .tooltip-enter, .tooltip-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}