1. 툴팁(tooltip)?
툴팁이란 해당 영역에 마우스를 올리면 부가적으로 정보가 나타나게 하는 것을 말한다.
2. 결과
3. HTML, CSS 소스
[HTML]
<body>
<div class="wrap">
<div class="box"> 말풍선 나와라!</div>
<div class="tooltip">말풍선 나왔다!</div>
</div>
</body>
[CSS]
<style type="text/css">
.wrap{
position: relative;
display: inline-block;
}
.box{
width: 150px;
background: #242F9B;
padding: 10px;
border-radius: 5px;
color: #ffffff;
text-align: center;
}
.tooltip{
position:absolute;
left:0px;
top:52px;
background: #646FD4;
padding: 10px;
border-radius:5px;
color: #fff;
text-align: center;
display: none;
}
.tooltip:after{
display: block;
content: '';
position: absolute;
top: -7px;
left:15px;
width: 0px;
height: 0px;
border-top: 8px solid none;
border-left: 8psolid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #646FD4;
}
.wrap:hover .tooltip{display: block;}
</style>'개발' 카테고리의 다른 글
| z-index 값을 올려도 적용이 안 되는 이유 (0) | 2022.08.19 |
|---|---|
| display: table로 너비가 동일한 메뉴버튼 만들기 (0) | 2022.08.18 |
| float 적용 시 발생하는 부모의 높이 문제 해결 방법 (0) | 2022.08.16 |
| clear 알아보기 (0) | 2022.08.16 |
| 목록을 만드는 태그 (0) | 2022.08.15 |
댓글