1
2<div class="tooltip-container">
3  <span class="tooltip-trigger">Hover me</span>
4  <div class="tooltip tooltip-top">This is a tooltip</div>
5</div>
6

1
2.tooltip-container {
3  position: relative;
4  display: inline-block;
5}
6
7.tooltip-trigger {
8  cursor: pointer;
9}
10
11.tooltip {
12  position: absolute;
13  background-color: #333333;
14  color: #ffffff;
15  font-size: 14px;
16  padding: 8px;
17  border-radius: 4px;
18  max-width: 200px;
19  z-index: 1;
20  opacity: 0;
21  visibility: hidden;
22  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
23}
24
25.tooltip::after {
26  content: "";
27  position: absolute;
28  border-style: solid;
29  border-width: 5px;
30}
31
32.tooltip-top {
33  min-width: 120px;
34  bottom: calc(100% + 5px);
35  left: 50%;
36  transform: translateX(-50%) ;
37}
38
39.tooltip-top::after {
40  top: 100%;
41  left: 50%;
42  margin-left: -5px;
43  border-color: #333333 transparent transparent transparent;
44}
45
46.tooltip-bottom {
47  top: calc(100% + 5px);
48  left: 50%;
49  transform: translateX(-50%) ;
50}
51
52.tooltip-bottom::after {
53  bottom: 100%;
54  left: 50%;
55  margin-left: -5px;
56  border-color: transparent transparent #333333 transparent;
57}
58
59.tooltip-left {
60  right: calc(100% + 5px);
61  top: 50%;
62  transform: translateY(-50%) ;
63}
64
65.tooltip-left::after {
66  left: 100%;
67  top: 50%;
68  margin-top: -5px;
69  border-color: transparent transparent transparent #333333;
70}
71
72.tooltip-right {
73  left: calc(100% + 5px);
74  top: 50%;
75  transform: translateY(-50%) ;
76}
77
78.tooltip-right::after {
79  right: 100%;
80  top: 50%;
81  margin-top: -5px;
82  border-color: transparent #333333 transparent transparent;
83}
84
85.tooltip-container:hover .tooltip {
86  opacity: 1;
87  visibility: visible;
88  
89}
90
91.tooltip-container:hover .tooltip-left,
92.tooltip-container:hover .tooltip-right {
93  
94}
95
96@keyframes fadeIn {
97  from { opacity: 0; }
98  to { opacity: 1; }
99}
100
101@keyframes scaleIn {
102  from { opacity: 0; transform: scale(0.9); }
103  to { opacity: 1; transform: scale(1); }
104}
105
106
107.tooltip-container:hover .tooltip {
108  animation: fadeIn 0.3s forwards;
109}
110
111