Team:UCL/Template:SCJtooltip.css
From 2014.igem.org
(Replaced content with ".tooltip { display:none; position:absolute; border:1px solid #333; background-color:#161616; border-radius:5px; padding:10px; color:#fff; font-size:12px Arial; }") |
|||
(13 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | . | + | [data-tip], |
- | + | [data-tip]:before, | |
- | + | [data-tip]:after { | |
- | + | -webkit-box-sizing: border-box; | |
- | + | -moz-box-sizing: border-box; | |
- | + | box-sizing: border-box; | |
- | + | } | |
- | + | [data-tip] { | |
- | + | position: relative; | |
+ | } | ||
+ | [data-tip]:hover:before, | ||
+ | [data-tip].show:before { | ||
+ | font-size: 16px; | ||
+ | content: attr(data-tip-content); | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | background: #555555; | ||
+ | color: #ffffff; | ||
+ | text-align: center; | ||
+ | border-radius: 5px 5px 5px 5px; | ||
+ | padding: 5px 5px 5px 5px; | ||
+ | z-index: 9999; | ||
+ | } | ||
+ | [data-tip]:hover:after, | ||
+ | [data-tip].show:after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | display: block; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | [data-tip]:hover:before, | ||
+ | [data-tip].show:before, | ||
+ | [data-tip]:hover:after, | ||
+ | [data-tip].show:after { | ||
+ | -webkit-transition: all 0.5s ease 0s; | ||
+ | transition: all 0.5s ease 0s; | ||
+ | -webkit-animation: fadeIn 0.5s; | ||
+ | animation: fadeIn 0.5s; | ||
+ | } | ||
+ | [data-tip].top:before, | ||
+ | [data-tip].bottom:before { | ||
+ | left: 50%; | ||
+ | width: 150px; | ||
+ | margin-left: -75px; | ||
+ | } | ||
+ | [data-tip].top.small:before, | ||
+ | [data-tip].bottom.small:before { | ||
+ | width: 75px; | ||
+ | margin-left: -37.5px; | ||
+ | } | ||
+ | [data-tip].top.large:before, | ||
+ | [data-tip].bottom.large:before { | ||
+ | width: 300px; | ||
+ | margin-left: -150px; | ||
+ | } | ||
+ | [data-tip].top:before { | ||
+ | bottom: 100%; | ||
+ | margin-bottom: 12px; | ||
+ | } | ||
+ | [data-tip].bottom:before { | ||
+ | top: 100%; | ||
+ | margin-top: 12px; | ||
+ | } | ||
+ | [data-tip].top:after, | ||
+ | [data-tip].bottom:after { | ||
+ | left: 50%; | ||
+ | margin-left: -12px; | ||
+ | border: 12px solid transparent; | ||
+ | } | ||
+ | [data-tip].top:after { | ||
+ | bottom: 100%; | ||
+ | margin-bottom: -12px; | ||
+ | border-top: 12px solid #555555; | ||
+ | } | ||
+ | [data-tip].bottom:after { | ||
+ | top: 100%; | ||
+ | margin-top: -12px; | ||
+ | border-bottom: 12px solid #555555; | ||
+ | } | ||
+ | [data-tip].right:before, | ||
+ | [data-tip].left:before { | ||
+ | top: 50%; | ||
+ | width: 150px; | ||
+ | height: 40px; | ||
+ | margin-top: -20px; | ||
+ | } | ||
+ | [data-tip].right.small:before, | ||
+ | [data-tip].left.small:before { | ||
+ | width: 75px; | ||
+ | height: 20px; | ||
+ | margin-top: -10px; | ||
+ | } | ||
+ | [data-tip].right.large:before, | ||
+ | [data-tip].left.large:before { | ||
+ | width: 300px; | ||
+ | height: 100px; | ||
+ | margin-top: -50px; | ||
+ | } | ||
+ | [data-tip].right:before { | ||
+ | left: 100%; | ||
+ | margin-left: 12px; | ||
+ | } | ||
+ | [data-tip].left:before { | ||
+ | right: 100%; | ||
+ | margin-right: 12px; | ||
+ | } | ||
+ | [data-tip].right:after, | ||
+ | [data-tip].left:after { | ||
+ | top: 50%; | ||
+ | margin-top: -12px; | ||
+ | border: 12px solid transparent; | ||
+ | } | ||
+ | [data-tip].right:after { | ||
+ | left: 100%; | ||
+ | margin-left: -12px; | ||
+ | border-right: 12px solid #555555; | ||
+ | } | ||
+ | [data-tip].left:after { | ||
+ | right: 100%; | ||
+ | margin-right: -12px; | ||
+ | border-left: 12px solid #555555; | ||
+ | } | ||
+ | @-webkit-keyframes fadeIn { | ||
+ | from { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | to { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | } | ||
+ | @keyframes fadeIn { | ||
+ | from { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | to { | ||
+ | opacity: 1; | ||
+ | } | ||
} | } |
Latest revision as of 14:15, 16 October 2014
[data-tip], [data-tip]:before, [data-tip]:after {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} [data-tip] {
position: relative;
} [data-tip]:hover:before, [data-tip].show:before {
font-size: 16px; content: attr(data-tip-content); display: block; position: absolute; background: #555555; color: #ffffff; text-align: center; border-radius: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; z-index: 9999;
} [data-tip]:hover:after, [data-tip].show:after {
content: ""; position: absolute; display: block; z-index: 1;
} [data-tip]:hover:before, [data-tip].show:before, [data-tip]:hover:after, [data-tip].show:after {
-webkit-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; -webkit-animation: fadeIn 0.5s; animation: fadeIn 0.5s;
} [data-tip].top:before, [data-tip].bottom:before {
left: 50%; width: 150px; margin-left: -75px;
} [data-tip].top.small:before, [data-tip].bottom.small:before {
width: 75px; margin-left: -37.5px;
} [data-tip].top.large:before, [data-tip].bottom.large:before {
width: 300px; margin-left: -150px;
} [data-tip].top:before {
bottom: 100%; margin-bottom: 12px;
} [data-tip].bottom:before {
top: 100%; margin-top: 12px;
} [data-tip].top:after, [data-tip].bottom:after {
left: 50%; margin-left: -12px; border: 12px solid transparent;
} [data-tip].top:after {
bottom: 100%; margin-bottom: -12px; border-top: 12px solid #555555;
} [data-tip].bottom:after {
top: 100%; margin-top: -12px; border-bottom: 12px solid #555555;
} [data-tip].right:before, [data-tip].left:before {
top: 50%; width: 150px; height: 40px; margin-top: -20px;
} [data-tip].right.small:before, [data-tip].left.small:before {
width: 75px; height: 20px; margin-top: -10px;
} [data-tip].right.large:before, [data-tip].left.large:before {
width: 300px; height: 100px; margin-top: -50px;
} [data-tip].right:before {
left: 100%; margin-left: 12px;
} [data-tip].left:before {
right: 100%; margin-right: 12px;
} [data-tip].right:after, [data-tip].left:after {
top: 50%; margin-top: -12px; border: 12px solid transparent;
} [data-tip].right:after {
left: 100%; margin-left: -12px; border-right: 12px solid #555555;
} [data-tip].left:after {
right: 100%; margin-right: -12px; border-left: 12px solid #555555;
} @-webkit-keyframes fadeIn {
from { opacity: 0; } to { opacity: 1; }
} @keyframes fadeIn {
from { opacity: 0; } to { opacity: 1; }
}