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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 797 | HTML | 9년 전 | 1711 | ||
| 796 | HTML | 9년 전 | 1522 | ||
| 795 | HTML | 9년 전 | 3305 | ||
| 794 | 기타 | 9년 전 | 2249 | ||
| 793 | HTML | 9년 전 | 3756 | ||
| 792 | HTML | 9년 전 | 1855 | ||
| 791 | 반응형 | 9년 전 | 2559 | ||
| 790 | HTML | 9년 전 | 10038 | ||
| 789 | HTML | 9년 전 | 5745 | ||
| 788 | CSS | 9년 전 | 2491 | ||
| 787 | 반응형 | 9년 전 | 3269 | ||
| 786 | 웹접근성 | 9년 전 | 3463 | ||
| 785 | 웹접근성 | 9년 전 | 2385 | ||
| 784 | 기타 | 9년 전 | 2391 | ||
| 783 | CSS | 9년 전 | 2245 | ||
| 782 | CSS | 9년 전 | 2417 | ||
| 781 | CSS | 9년 전 | 3950 | ||
| 780 | 반응형 | 9년 전 | 4304 | ||
| 779 | CSS | 9년 전 | 3151 | ||
| 778 | 반응형 | 9년 전 | 3283 | ||
| 777 | 반응형 | 9년 전 | 7639 | ||
| 776 | CSS | 9년 전 | 4781 | ||
| 775 | CSS | 9년 전 | 5390 | ||
| 774 | CSS | 9년 전 | 4615 | ||
| 773 | 반응형 | 9년 전 | 3601 | ||
| 772 | CSS | 9년 전 | 2989 | ||
| 771 | 웹접근성 | 9년 전 | 3532 | ||
| 770 | HTML | 9년 전 | 3743 | ||
| 769 | HTML | 9년 전 | 2376 | ||
| 768 | 9년 전 | 2404 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기