123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- /**
- * Tooltip Styles
- */
- /* Add this attribute to the element that needs a tooltip */
- [data-tooltip] {
- position: relative;
- z-index: 9999999;
- cursor: pointer;
- }
- /* Hide the tooltip content by default */
- [data-tooltip]:before,
- [data-tooltip]:after {
- visibility: hidden;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
- filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
- opacity: 0;
- pointer-events: none;
- }
- /* Position tooltip above the element */
- [data-tooltip]:before {
- position: absolute;
- bottom: 80%;
- left: 50%;
- margin-bottom: 5px;
- margin-left: -30px;
- padding: 7px;
- width: 60px;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- background-color: #000;
- background-color: hsla(0, 0%, 20%, 0.9);
- color: #fff;
- content: attr(data-tooltip);
- text-align: center;
- font-size: 14px;
- line-height: 1.2;
- }
- /* Triangle hack to make tooltip look like a speech bubble */
- [data-tooltip]:after {
- position: absolute;
- bottom: 80%;
- left: 50%;
- margin-left: 1px;
- width: 0;
- border-top: 5px solid #000;
- border-top: 5px solid hsla(0, 0%, 20%, 0.9);
- border-right: 5px solid transparent;
- border-left: 5px solid transparent;
- content: " ";
- font-size: 0;
- line-height: 0;
- }
- /* Show tooltip content on hover */
- [data-tooltip]:hover:before,
- [data-tooltip]:hover:after {
- visibility: visible;
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
- filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
- opacity: 1;
- z-index: 9999999;
- }
- /* fonts */
- div.jqcloud {
- font-family: "Helvetica", "Arial", sans-serif;
- font-size: 10px;
- line-height: normal;
- }
- div.jqcloud a {
- font-size: inherit;
- text-decoration: none;
- }
- div.jqcloud span.w10 { font-size: 550%; }
- div.jqcloud span.w9 { font-size: 500%; }
- div.jqcloud span.w8 { font-size: 450%; }
- div.jqcloud span.w7 { font-size: 400%; }
- div.jqcloud span.w6 { font-size: 350%; }
- div.jqcloud span.w5 { font-size: 300%; }
- div.jqcloud span.w4 { font-size: 250%; }
- div.jqcloud span.w3 { font-size: 200%; }
- div.jqcloud span.w2 { font-size: 150%; }
- div.jqcloud span.w1 { font-size: 100%; }
- /* colors */
- div.jqcloud { color: #09f; }
- div.jqcloud a { color: inherit; }
- div.jqcloud a:hover { color: #0df; }
- div.jqcloud a:hover { color: #0cf; }
- div.jqcloud span.w10 { color: #0cf; }
- div.jqcloud span.w9 { color: #0cf; }
- div.jqcloud span.w8 { color: #0cf; }
- div.jqcloud span.w7 { color: #39d; }
- div.jqcloud span.w6 { color: #90c5f0; }
- div.jqcloud span.w5 { color: #90a0dd; }
- div.jqcloud span.w4 { color: #90c5f0; }
- div.jqcloud span.w3 { color: #a0ddff; }
- div.jqcloud span.w2 { color: #99ccee; }
- div.jqcloud span.w1 { color: #aab5f0; }
- /* layout */
- div.jqcloud {
- overflow: hidden;
- position: relative;
- }
- div.jqcloud span { padding: 0; }
|