jimu-mobile/src/styles/jimu-popover.less

积木组件库助力移动端开发

/*利用两个三角形叠加实现*/
.tooltip-box {
    position: absolute;
    text-align:left;
    color:@color-text-base-inverse;
    opacity: 0.8;
    background: @fill-highlight;
    border-radius: @radius-xs;
    font-size: @font-size-caption-sm;
    display: inline-block;
    padding:11px 30px 11px 16px;
    line-height: 18px;
    z-index: 87;
}
.triangle-border {
    position:absolute;
    overflow:hidden;
    width:0;
    height:0;
    border-width:7px;
    border-style:solid dashed dashed dashed;
}
.tip-close {
  display: inline-block;
  padding:0 5px;
  position: absolute;
  top:50%;
  -webkit-transform: translateY(-50%);transform: translateY(-50%);
  right:5px;
  font-size: @font-size-icontext;
}
.icon-close-style{
   font-size:10px;
   margin-left: 10px;
}
.tb-background-bottom {
    bottom:-12px;
    border-color:@border-color-highlight transparent transparent transparent;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.tb-background-top {
    top:-12px;
    border-color: transparent transparent @border-color-highlight transparent;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.tb-background-left {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border-color: transparent @border-color-highlight transparent transparent  ;
}
.tb-background-right {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border-color: transparent transparent transparent @border-color-highlight;
}
.tb-background-topLeft {
    border-color: #343C5C transparent transparent transparent;
    bottom: -12px;
    right: 10px;
}
.hide {
  display: none;
}