style.css 1013 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. .tooltip-info {
  2. position: absolute;
  3. top: 10px;
  4. left: 10px;
  5. cursor: help;
  6. background-color: rgba(0, 0, 0, 0.3);
  7. width: 20px;
  8. height: 20px;
  9. border-radius: 50%;
  10. display: flex;
  11. align-items: center;
  12. justify-content: center;
  13. flex-direction: column;
  14. z-index: 100;
  15. }
  16. .tooltip-info::after {
  17. content: '';
  18. display: block;
  19. width: 2px;
  20. height: 7px;
  21. background-color: white;
  22. margin-top: 2px;
  23. }
  24. .tooltip-info::before {
  25. content: '';
  26. display: block;
  27. width: 2px;
  28. height: 2px;
  29. background-color: white;
  30. }
  31. .tooltip-content {
  32. display: none;
  33. background-color: #f9f9f9;
  34. color: #333;
  35. border: 1px solid #ddd;
  36. padding: 15px;
  37. position: absolute;
  38. top: 40px;
  39. left: 10px;
  40. width: 250px;
  41. font-size: 16px;
  42. opacity: 0;
  43. border-radius: 8px;
  44. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  45. z-index: 100;
  46. }
  47. .tooltip:hover .tooltip-content {
  48. display: block;
  49. animation: fadeIn 0.5s;
  50. opacity: 1;
  51. }
  52. @keyframes fadeIn {
  53. from {opacity: 0;}
  54. to {opacity: 1;}
  55. }