plot-plan-designer
Version:
Design Editor Tools with React.js + ant.design + fabric.js
50 lines • 1.43 kB
text/less
.rde-tooltip {
position: fixed;
-moz-animation: visibility .3s linear;
-webkit-animation: visibility .3s linear;
animation: visibility .3s linear;
z-index: 600000;
&-right {
position: relative;
border-radius: 4px;
background: rgba(0, 0, 0, 0.35);
color: #fff;
font-size: 14px;
padding: 8px;
margin-left: 12px;
&::after {
content: '';
position: absolute;
top: 50%;
left: 0; /* To the left of the tooltip */
margin-left: -10px;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(0, 0, 0, 0.35) transparent transparent;
}
}
&-left {
position: relative;
border-radius: 4px;
background: rgba(0, 0, 0, 0.35);
color: #fff;
font-size: 14px;
padding: 8px;
&::after {
content: '';
position: absolute;
top: 50%;
left: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent rgba(0, 0, 0, 0.35);
}
}
&.tooltip-hidden {
display: none;
top: 0;
left: 0;
}
}