Team:UCL/Template:SCJtooltip.css

From 2014.igem.org

Revision as of 14:15, 16 October 2014 by Sanjaycj (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

[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;
 }

}