dde9d9e2e1895cceed4137165579a7efe617bb1d.svn-base 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. /**
  2. * Demo styles
  3. * Not needed for tooltips to work
  4. */
  5. /* `border-box`... ALL THE THINGS! */
  6. html {
  7. box-sizing: border-box;
  8. }
  9. *,
  10. *:before,
  11. *:after {
  12. box-sizing: inherit;
  13. }
  14. body {
  15. margin: 64px auto;
  16. text-align: center;
  17. font-size: 100%;
  18. max-width: 640px;
  19. width: 94%;
  20. }
  21. a:hover {
  22. text-decoration: none;
  23. }
  24. header,
  25. .demo,
  26. .demo p {
  27. margin: 4em 0;
  28. text-align: center;
  29. }
  30. /**
  31. * Tooltip Styles
  32. */
  33. /* Base styles for the element that has a tooltip */
  34. [data-tooltip],
  35. .tooltip {
  36. position: relative;
  37. cursor: pointer;
  38. }
  39. /* Base styles for the entire tooltip */
  40. [data-tooltip]:before,
  41. [data-tooltip]:after,
  42. .tooltip:before,
  43. .tooltip:after {
  44. position: absolute;
  45. visibility: hidden;
  46. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  47. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  48. opacity: 0;
  49. -webkit-transition:
  50. opacity 0.2s ease-in-out,
  51. visibility 0.2s ease-in-out,
  52. -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  53. -moz-transition:
  54. opacity 0.2s ease-in-out,
  55. visibility 0.2s ease-in-out,
  56. -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  57. transition:
  58. opacity 0.2s ease-in-out,
  59. visibility 0.2s ease-in-out,
  60. transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  61. -webkit-transform: translate3d(0, 0, 0);
  62. -moz-transform: translate3d(0, 0, 0);
  63. transform: translate3d(0, 0, 0);
  64. pointer-events: none;
  65. }
  66. /* Show the entire tooltip on hover and focus */
  67. [data-tooltip]:hover:before,
  68. [data-tooltip]:hover:after,
  69. [data-tooltip]:focus:before,
  70. [data-tooltip]:focus:after,
  71. .tooltip:hover:before,
  72. .tooltip:hover:after,
  73. .tooltip:focus:before,
  74. .tooltip:focus:after {
  75. visibility: visible;
  76. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  77. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  78. opacity: 1;
  79. }
  80. /* Base styles for the tooltip's directional arrow */
  81. .tooltip:before,
  82. [data-tooltip]:before {
  83. z-index: 1001;
  84. border: 6px solid transparent;
  85. background: transparent;
  86. content: "";
  87. }
  88. /* Base styles for the tooltip's content area */
  89. .tooltip:after,
  90. [data-tooltip]:after {
  91. z-index: 1000;
  92. padding: 8px;
  93. width: 160px;
  94. background-color: #000;
  95. background-color: hsla(0, 0%, 20%, 0.9);
  96. color: #fff;
  97. content: attr(data-tooltip);
  98. font-size: 14px;
  99. line-height: 1.2;
  100. }
  101. /* Directions */
  102. /* Top (default) */
  103. [data-tooltip]:before,
  104. [data-tooltip]:after,
  105. .tooltip:before,
  106. .tooltip:after,
  107. .tooltip-top:before,
  108. .tooltip-top:after {
  109. bottom: 100%;
  110. left: 50%;
  111. }
  112. [data-tooltip]:before,
  113. .tooltip:before,
  114. .tooltip-top:before {
  115. margin-left: -6px;
  116. margin-bottom: -12px;
  117. border-top-color: #000;
  118. border-top-color: hsla(0, 0%, 20%, 0.9);
  119. }
  120. /* Horizontally align top/bottom tooltips */
  121. [data-tooltip]:after,
  122. .tooltip:after,
  123. .tooltip-top:after {
  124. margin-left: -80px;
  125. }
  126. [data-tooltip]:hover:before,
  127. [data-tooltip]:hover:after,
  128. [data-tooltip]:focus:before,
  129. [data-tooltip]:focus:after,
  130. .tooltip:hover:before,
  131. .tooltip:hover:after,
  132. .tooltip:focus:before,
  133. .tooltip:focus:after,
  134. .tooltip-top:hover:before,
  135. .tooltip-top:hover:after,
  136. .tooltip-top:focus:before,
  137. .tooltip-top:focus:after {
  138. -webkit-transform: translateY(-12px);
  139. -moz-transform: translateY(-12px);
  140. transform: translateY(-12px);
  141. }
  142. /* Left */
  143. .tooltip-left:before,
  144. .tooltip-left:after {
  145. right: 100%;
  146. bottom: 50%;
  147. left: auto;
  148. }
  149. .tooltip-left:before {
  150. margin-left: 0;
  151. margin-right: -12px;
  152. margin-bottom: 0;
  153. border-top-color: transparent;
  154. border-left-color: #000;
  155. border-left-color: hsla(0, 0%, 20%, 0.9);
  156. }
  157. .tooltip-left:hover:before,
  158. .tooltip-left:hover:after,
  159. .tooltip-left:focus:before,
  160. .tooltip-left:focus:after {
  161. -webkit-transform: translateX(-12px);
  162. -moz-transform: translateX(-12px);
  163. transform: translateX(-12px);
  164. }
  165. /* Bottom */
  166. .tooltip-bottom:before,
  167. .tooltip-bottom:after {
  168. top: 100%;
  169. bottom: auto;
  170. left: 50%;
  171. }
  172. .tooltip-bottom:before {
  173. margin-top: -12px;
  174. margin-bottom: 0;
  175. border-top-color: transparent;
  176. border-bottom-color: #000;
  177. border-bottom-color: hsla(0, 0%, 20%, 0.9);
  178. }
  179. .tooltip-bottom:hover:before,
  180. .tooltip-bottom:hover:after,
  181. .tooltip-bottom:focus:before,
  182. .tooltip-bottom:focus:after {
  183. -webkit-transform: translateY(12px);
  184. -moz-transform: translateY(12px);
  185. transform: translateY(12px);
  186. }
  187. /* Right */
  188. .tooltip-right:before,
  189. .tooltip-right:after {
  190. bottom: 50%;
  191. left: 100%;
  192. }
  193. .tooltip-right:before {
  194. margin-bottom: 0;
  195. margin-left: -12px;
  196. border-top-color: transparent;
  197. border-right-color: #000;
  198. border-right-color: hsla(0, 0%, 20%, 0.9);
  199. }
  200. .tooltip-right:hover:before,
  201. .tooltip-right:hover:after,
  202. .tooltip-right:focus:before,
  203. .tooltip-right:focus:after {
  204. -webkit-transform: translateX(12px);
  205. -moz-transform: translateX(12px);
  206. transform: translateX(12px);
  207. }
  208. /* Move directional arrows down a bit for left/right tooltips */
  209. .tooltip-left:before,
  210. .tooltip-right:before {
  211. top: 3px;
  212. }
  213. /* Vertically center tooltip content for left/right tooltips */
  214. .tooltip-left:after,
  215. .tooltip-right:after {
  216. margin-left: 0;
  217. margin-bottom: -16px;
  218. }