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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1037 | CSS | 8년 전 | 1851 | ||
| 1036 | CSS | 8년 전 | 1165 | ||
| 1035 | CSS | 8년 전 | 1372 | ||
| 1034 | CSS | 8년 전 | 1349 | ||
| 1033 | CSS | 8년 전 | 1570 | ||
| 1032 | CSS | 8년 전 | 1865 | ||
| 1031 | CSS | 8년 전 | 2144 | ||
| 1030 | CSS | 8년 전 | 1799 | ||
| 1029 | CSS | 8년 전 | 1800 | ||
| 1028 | CSS | 8년 전 | 1676 | ||
| 1027 | CSS | 8년 전 | 1467 | ||
| 1026 | CSS | 8년 전 | 1433 | ||
| 1025 | CSS | 8년 전 | 1651 | ||
| 1024 | CSS | 8년 전 | 1687 | ||
| 1023 | CSS | 8년 전 | 1526 | ||
| 1022 | CSS | 8년 전 | 1444 | ||
| 1021 | CSS | 8년 전 | 2096 | ||
| 1020 | CSS | 8년 전 | 2170 | ||
| 1019 | CSS | 8년 전 | 1571 | ||
| 1018 | CSS | 8년 전 | 2069 | ||
| 1017 | CSS | 8년 전 | 1852 | ||
| 1016 | CSS | 8년 전 | 1754 | ||
| 1015 | CSS | 8년 전 | 2200 | ||
| 1014 | CSS | 8년 전 | 1755 | ||
| 1013 | CSS | 8년 전 | 1989 | ||
| 1012 | CSS | 8년 전 | 2292 | ||
| 1011 | CSS | 8년 전 | 2241 | ||
| 1010 | CSS | 8년 전 | 1628 | ||
| 1009 | CSS | 8년 전 | 1526 | ||
| 1008 | CSS | 8년 전 | 1828 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기