• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Tooltips</title>
7
    <style>
8
        .tooltip {
9
            position: relative;
10
            display: inline-block;
11
        }
12
        .tooltip .tooltip-content {
13
            visibility: hidden;
14
            width: 300px;
15
            background-color: orange;
16
            padding: 0;
17
            margin-top: 10px;
18
            color: white;
19
            text-align: center;
20
            position: absolute;
21
            z-index: 1;
22
        }
23
        .tooltip:hover .tooltip-content { visibility: visible; }
24
    </style>
25
</head>
26
​
27
<body>
28
​
29
    <h1>툴팁 효과</h1>
30
    <div class="tooltip">
31
        <span>여기에 마우스를 올려보세요!</span>
32
        <div class="tooltip-content">
33
            <p>마우스를 올려야 나타나는 툴팁입니다!</p>
34
        </div>
35
    </div>
36
​
37
</body>
38
​
39
</html>