tooltip.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233
  1. /**
  2. * @name tooltip.css
  3. */
  4. .tipsy {
  5. padding: 4px;
  6. font-size: 12px;
  7. position: absolute;
  8. z-index: 100000;
  9. animation-name: fadeIn;
  10. animation-duration: .3s;
  11. }
  12. .tipsy-inner {
  13. padding: 8px 10px 7px;
  14. color: #fff;
  15. max-width: 200px;
  16. text-align: center;
  17. background: rgba(0, 0, 0, .8);
  18. border-radius: 25px;
  19. }
  20. .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed rgba(0, 0, 0, .8); }
  21. .tipsy-arrow-n { border-bottom-color: rgba(0, 0, 0, .8); }
  22. .tipsy-arrow-s { border-top-color: rgba(0, 0, 0, .8); }
  23. .tipsy-arrow-e { border-left-color: rgba(0, 0, 0, .8); }
  24. .tipsy-arrow-w { border-right-color: rgba(0, 0, 0, .8); }
  25. .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; }
  26. .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
  27. .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
  28. .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; }
  29. .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
  30. .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
  31. .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; }
  32. .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; }