David A. Windham
david
/
lychee
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: db64df8820
Branches Tags
lychee
/
assets
/
css
/
tooltip.css

tooltip.css 2.1 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839 
  1. /**
    2. 

  2.  * @name        tooltip.css
    3. 

  3.  */
    4. 

  4. 

  5. .tipsy {
    6. 

  6. 	padding: 4px;
    7. 

  7. 	font-size: 12px;
    8. 

  8. 	position: absolute;
    9. 

  9. 	z-index: 100000;
    10. 

  10. 

  11. 	/* Animation */
    12. 

  12. 	-webkit-animation-name: fadeIn;
    13. 

  13. 	-webkit-animation-duration: .3s;
    14. 

  14. 	-moz-animation-name: fadeIn;
    15. 

  15. 	-moz-animation-duration: .3s;
    16. 

  16. 	animation-name: fadeIn;
    17. 

  17. 	animation-duration: .3s;
    18. 

  18. }
    19. 

  19. .tipsy-inner {
    20. 

  20. 	padding: 8px 10px 7px;
    21. 

  21. 	color: #fff;
    22. 

  22. 	max-width: 200px;
    23. 

  23. 	text-align: center;
    24. 

  24. 	background: rgba(0, 0, 0, .8);
    25. 

  25. 	border-radius: 25px;
    26. 

  26. }
    27. 

  27. .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed rgba(0, 0, 0, .8); }
    28. 

  28. .tipsy-arrow-n { border-bottom-color: rgba(0, 0, 0, .8); }
    29. 

  29. .tipsy-arrow-s { border-top-color: rgba(0, 0, 0, .8); }
    30. 

  30. .tipsy-arrow-e { border-left-color: rgba(0, 0, 0, .8); }
    31. 

  31. .tipsy-arrow-w { border-right-color: rgba(0, 0, 0, .8); }
    32. 

  32. .tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
    33. 

  33. .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
    34. 

  34. .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
    35. 

  35. .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
    36. 

  36. .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
    37. 

  37. .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
    38. 

  38. .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
    39. 

  39. .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
    40.