jimu-mobile
Version:
积木组件库助力移动端开发
72 lines (71 loc) • 1.77 kB
text/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;
}