33 lines
2.0 KiB
SCSS
33 lines
2.0 KiB
SCSS
|
/**
|
||
|
|
* @name tooltip.css
|
||
|
|
*/
|
||
|
|
|
||
|
|
.tipsy {
|
||
|
|
padding: 4px;
|
||
|
|
font-size: 12px;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 100000;
|
||
|
|
animation-name: fadeIn;
|
||
|
|
animation-duration: .3s;
|
||
|
|
}
|
||
|
|
.tipsy-inner {
|
||
|
|
padding: 8px 10px 7px;
|
||
|
|
color: #fff;
|
||
|
|
max-width: 200px;
|
||
|
|
text-align: center;
|
||
|
|
background: rgba(0, 0, 0, .8);
|
||
|
|
border-radius: 25px;
|
||
|
|
}
|
||
|
|
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed rgba(0, 0, 0, .8); }
|
||
|
|
.tipsy-arrow-n { border-bottom-color: rgba(0, 0, 0, .8); }
|
||
|
|
.tipsy-arrow-s { border-top-color: rgba(0, 0, 0, .8); }
|
||
|
|
.tipsy-arrow-e { border-left-color: rgba(0, 0, 0, .8); }
|
||
|
|
.tipsy-arrow-w { border-right-color: rgba(0, 0, 0, .8); }
|
||
|
|
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
|
||
|
|
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
|
||
|
|
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
|
||
|
|
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
|
||
|
|
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
|
||
|
|
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
|
||
|
|
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
|
||
|
|
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
|