react-cqtoolbox
Version:
[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]
120 lines (112 loc) • 2.28 kB
CSS
.tooltip {
display: block;
font-size: 10px;
font-weight: 700;
line-height: 12px;
max-width: 170px;
padding: 5px;
text-align: center;
z-index: 200;
box-sizing: border-box;
font-family: Microsoft Yahei,Helvetica Neue,\\5B8B\4F53,Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.tooltip *,
.tooltip *::after,
.tooltip *::before {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-touch-callout: none;
}
.tooltipInner {
background: rgb(31, 45, 61);
border-radius: 2px;
color: rgb(255, 255, 255);
display: block;
padding: 8px;
}
.tooltipArrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.top,.topLeft,.topRight {
bottom: 0px;
border-width: 5px 5px 0;
border-top-color: rgb(31, 45, 61);
}
.topLeft {
left: 16px;
}
.topRight {
right: 16px;
}
.right,.rightBottom,.rightTop {
left: 0px;
border-width: 5px 5px 5px 0;
border-right-color: rgb(31, 45, 61);
}
.right {
top: 50%;
margin-top: -5px;
}
.rightTop {
top: 8px;
}
.rightBottom {
bottom: 8px;
}
.left,.leftBottom,.leftTop {
right: 0px;
border-width: 5px 0 5px 5px;
border-left-color: rgb(31, 45, 61);
}
.left {
top: 50%;
margin-top: -5px;
}
.leftTop {
top: 8px;
}
.leftBottom {
bottom: 8px;
}
.bottom, .bottomLeft, .bottomRight {
top: 0px;
border-width: 0 5px 5px;
border-bottom-color: rgb(31, 45, 61);
}
.bottom {
left: 50%;
margin-left: -5px;
}
.bottomLeft {
left: 16px;
}
.bottomRight {
right: 16px;
}
.popup {
opacity: 0;
box-shadow: none;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition-delay: 0.07s;
transition-delay: 0.07s
}
.popup.active {
opacity: 1;
}