css 툴팁 만들기
<style>
.center {
text-align:center;
margin-top:200px;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
</style>
<body>
<div class="center">
<div class="tooltip" >Hello World!
<span class="tooltiptext">this is tooltip!</span>
</div>
</div>
</body>
댓글 1개
툴팁 이쁘네요~ 좋은 자료 감사합니다.
게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 617 | HTML | 13년 전 | 3424 | ||
| 616 | HTML |
 cshop |
13년 전 | 3224 | |
| 615 | HTML | 13년 전 | 4147 | ||
| 614 | HTML |
크라이스트
|
13년 전 | 5449 | |
| 613 | HTML | 13년 전 | 2593 | ||
| 612 | HTML | 13년 전 | 3874 | ||
| 611 | HTML | 13년 전 | 4092 | ||
| 610 | HTML | 13년 전 | 4858 | ||
| 609 | HTML | 13년 전 | 3840 | ||
| 608 | HTML | 13년 전 | 5313 | ||
| 607 | HTML | 13년 전 | 3198 | ||
| 606 | HTML | 13년 전 | 3105 | ||
| 605 | HTML |
techer
|
13년 전 | 5382 | |
| 604 | HTML | 13년 전 | 4369 | ||
| 603 | HTML | 13년 전 | 3087 | ||
| 602 | HTML | 13년 전 | 3285 | ||
| 601 | HTML |
성민꼬르꼬
|
13년 전 | 3962 | |
| 600 | HTML | 13년 전 | 3348 | ||
| 599 | HTML | 13년 전 | 4656 | ||
| 598 | HTML | 13년 전 | 6549 | ||
| 597 | HTML | 13년 전 | 2759 | ||
| 596 | HTML | 13년 전 | 3764 | ||
| 595 | HTML |
Black
|
13년 전 | 6374 | |
| 594 | HTML |
techer
|
13년 전 | 2560 | |
| 593 | HTML | 13년 전 | 4067 | ||
| 592 | HTML |
성민꼬르꼬
|
13년 전 | 3784 | |
| 591 | HTML | 13년 전 | 3484 | ||
| 590 | HTML | 13년 전 | 9215 | ||
| 589 | HTML | 13년 전 | 2855 | ||
| 588 | HTML |
크라운엠버서더
|
13년 전 | 4724 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기