65 lines
1.6 KiB
CSS
65 lines
1.6 KiB
CSS
/* +-----------------------------------------------------------------------+ *\
|
|
|* | tooltips styling | *|
|
|
|* | (c) 2014 Michał "rysiek" Woźniak <rysiek@hackerspace.pl> | *|
|
|
|* | Licensed under AGPL | *|
|
|
\* +-----------------------------------------------------------------------+ */
|
|
|
|
*[data-tooltip] {
|
|
position:relative;
|
|
}
|
|
|
|
*[data-tooltip]::before {
|
|
content:attr(data-tooltip);
|
|
top:-3em;
|
|
left:-2em;
|
|
height:1.5em;
|
|
min-width:5em;
|
|
max-width:20em;
|
|
white-space:nowrap;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
padding:0.5em 0.7em 0.7em 0.7em;
|
|
display:block;
|
|
border-radius:0.3em;
|
|
text-align:center;
|
|
|
|
color:white;
|
|
background:#060606;
|
|
}
|
|
|
|
*[data-tooltip]::before,
|
|
*[data-tooltip]::after {
|
|
position:absolute;
|
|
opacity:0.2;
|
|
visibility:hidden;
|
|
font-size:80%;
|
|
font-family:sans-serif;
|
|
transition-duration:0s;
|
|
-moz-transition-duration:0s;
|
|
-webkit-transition-duration:0s;
|
|
|
|
}
|
|
|
|
*[data-tooltip]:hover::before,
|
|
*[data-tooltip]:hover::after {
|
|
opacity:0.8;
|
|
visibility:visible;
|
|
transition:opacity 0.3s ease-out;
|
|
-moz-transition:opacity 0.3s ease-out;
|
|
-webkit-transition:opacity 0.3s ease-out;
|
|
}
|
|
|
|
*[data-tooltip]::after {
|
|
content:" ";
|
|
background:transparent;
|
|
width:1px;
|
|
height:1px;
|
|
border:solid 0.4em #060606;
|
|
display:block;
|
|
border-bottom:none;
|
|
border-left:solid 0.3em transparent;
|
|
border-right:solid 0.3em transparent;
|
|
top:-0.3em;
|
|
left:50%;
|
|
margin-left:-0.5em;
|
|
} |