word_cloud.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /**
  2. * Tooltip Styles
  3. */
  4. /* Add this attribute to the element that needs a tooltip */
  5. [data-tooltip] {
  6. position: relative;
  7. z-index: 9999999;
  8. cursor: pointer;
  9. }
  10. /* Hide the tooltip content by default */
  11. [data-tooltip]:before,
  12. [data-tooltip]:after {
  13. visibility: hidden;
  14. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  15. filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  16. opacity: 0;
  17. pointer-events: none;
  18. }
  19. /* Position tooltip above the element */
  20. [data-tooltip]:before {
  21. position: absolute;
  22. bottom: 80%;
  23. left: 50%;
  24. margin-bottom: 5px;
  25. margin-left: -30px;
  26. padding: 7px;
  27. width: 60px;
  28. -webkit-border-radius: 3px;
  29. -moz-border-radius: 3px;
  30. border-radius: 3px;
  31. background-color: #000;
  32. background-color: hsla(0, 0%, 20%, 0.9);
  33. color: #fff;
  34. content: attr(data-tooltip);
  35. text-align: center;
  36. font-size: 14px;
  37. line-height: 1.2;
  38. }
  39. /* Triangle hack to make tooltip look like a speech bubble */
  40. [data-tooltip]:after {
  41. position: absolute;
  42. bottom: 80%;
  43. left: 50%;
  44. margin-left: 1px;
  45. width: 0;
  46. border-top: 5px solid #000;
  47. border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  48. border-right: 5px solid transparent;
  49. border-left: 5px solid transparent;
  50. content: " ";
  51. font-size: 0;
  52. line-height: 0;
  53. }
  54. /* Show tooltip content on hover */
  55. [data-tooltip]:hover:before,
  56. [data-tooltip]:hover:after {
  57. visibility: visible;
  58. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  59. filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  60. opacity: 1;
  61. z-index: 9999999;
  62. }
  63. /* fonts */
  64. div.jqcloud {
  65. font-family: "Helvetica", "Arial", sans-serif;
  66. font-size: 10px;
  67. line-height: normal;
  68. }
  69. div.jqcloud a {
  70. font-size: inherit;
  71. text-decoration: none;
  72. }
  73. div.jqcloud span.w10 { font-size: 550%; }
  74. div.jqcloud span.w9 { font-size: 500%; }
  75. div.jqcloud span.w8 { font-size: 450%; }
  76. div.jqcloud span.w7 { font-size: 400%; }
  77. div.jqcloud span.w6 { font-size: 350%; }
  78. div.jqcloud span.w5 { font-size: 300%; }
  79. div.jqcloud span.w4 { font-size: 250%; }
  80. div.jqcloud span.w3 { font-size: 200%; }
  81. div.jqcloud span.w2 { font-size: 150%; }
  82. div.jqcloud span.w1 { font-size: 100%; }
  83. /* colors */
  84. div.jqcloud { color: #09f; }
  85. div.jqcloud a { color: inherit; }
  86. div.jqcloud a:hover { color: #0df; }
  87. div.jqcloud a:hover { color: #0cf; }
  88. div.jqcloud span.w10 { color: #0cf; }
  89. div.jqcloud span.w9 { color: #0cf; }
  90. div.jqcloud span.w8 { color: #0cf; }
  91. div.jqcloud span.w7 { color: #39d; }
  92. div.jqcloud span.w6 { color: #90c5f0; }
  93. div.jqcloud span.w5 { color: #90a0dd; }
  94. div.jqcloud span.w4 { color: #90c5f0; }
  95. div.jqcloud span.w3 { color: #a0ddff; }
  96. div.jqcloud span.w2 { color: #99ccee; }
  97. div.jqcloud span.w1 { color: #aab5f0; }
  98. /* layout */
  99. div.jqcloud {
  100. overflow: hidden;
  101. position: relative;
  102. }
  103. div.jqcloud span { padding: 0; }