Notice
Recent Posts
Recent Comments
Tags more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[CSS] ToolTip 툴팁 - 내용 미리보기 기능 구현하기 본문

웹퍼블리싱/CSS

[CSS] ToolTip 툴팁 - 내용 미리보기 기능 구현하기

http://portfolio.wonpaper.net 2025. 3. 14. 10:11

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>툴팁 예제</title>
    <style>
        /* 툴팁 스타일 */
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }
 
        /* 기본적으로 툴팁은 보이지 않음 */
        .tooltip::after {
            content: attr(data-comment); /* data-comment 속성 값을 가져와 표시 */
            position: absolute;
            left: 50%;
            bottom: 150%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            white-space: nowrap;
            font-size: 12px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s;
        }
 
        /* 마우스를 올리면 툴팁이 나타남 */
        .tooltip:hover::after {
            opacity: 1;
            visibility: visible;
        }
    </style>
</head>
<body>
 
    <p class="tooltip" data-comment="안녕하세요!">마우스를 올려보세요.</p>
 
</body>
</html>
 cs

 

 

 

 

 

'웹퍼블리싱 > CSS' 카테고리의 다른 글

[CSS] 배경에 Blur 효과 만들기  (0) 2025.03.24
[CSS] 인쇄시 배경이미지가 안나올때  (0) 2024.12.22
[CSS] 프린트 가로, 세로 출력하기  (0) 2024.07.10
[CSS] 하위 선택자, 형제 선택자, 자식 선택자  (0) 2024.04.05
[CSS] 웹퍼블리싱 익히기  (0) 2024.03.15
'웹퍼블리싱/CSS' Related Articles more
Comments