static/css/impala/tooltips.less (55 lines of code) (raw):
@import 'lib';
#tooltip {
display: none;
background: #2A4364;
color: #fff;
font-size: 11px;
border: 1px solid #fff;
.border-radius(.8em);
max-width: 300px;
text-align: center;
position: absolute;
padding: 1em;
pointer-events: none;
&.error {
background: #6c1a1a;
}
span {
display: block;
line-height: 1.2em;
}
&:before {
content: "\00a0";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
width: 0;
height: 0;
margin-left: -6px;
left: 50%;
bottom: -16px;
border: solid transparent;
border-width: 8px 6px;
border-top-color: #2a4364;
pointer-events: none;
}
&.error:before {
border-top-color: #6c1a1a;
}
}
.tip {
background-color: #ddd;
.border-radius(20px);
color: #fff;
cursor: help;
display: inline-block;
font-size: 14px;
font-weight: bold;
height: 18px;
line-height: 18px;
text-align: center;
text-decoration: none;
width: 18px;
}
.tip:hover {
background-color: #2a4364;
}