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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1277 | 기타 |
선택과집중
|
2개월 전 | 150 | |
| 1276 | CSS |
선택과집중
|
2개월 전 | 272 | |
| 1275 | CSS |
선택과집중
|
3개월 전 | 272 | |
| 1274 | CSS |
선택과집중
|
3개월 전 | 465 | |
| 1273 | 기타 |
선택과집중
|
4개월 전 | 402 | |
| 1272 | CSS |
선택과집중
|
4개월 전 | 532 | |
| 1271 | CSS |
선택과집중
|
5개월 전 | 579 | |
| 1270 | CSS |
선택과집중
|
5개월 전 | 460 | |
| 1269 | CSS |
선택과집중
|
6개월 전 | 541 | |
| 1268 | CSS | 6개월 전 | 430 | ||
| 1267 | 10개월 전 | 711 | |||
| 1266 | HTML | 10개월 전 | 839 | ||
| 1265 | CSS |
|
1년 전 | 770 | |
| 1264 | 1년 전 | 1262 | |||
| 1263 | HTML |
|
1년 전 | 794 | |
| 1262 | CSS |
|
1년 전 | 999 | |
| 1261 | CSS |
|
1년 전 | 1014 | |
| 1260 | HTML | 2년 전 | 1491 | ||
| 1259 | 기타 | 2년 전 | 830 | ||
| 1258 | CSS |
|
2년 전 | 1589 | |
| 1257 | HTML |
|
2년 전 | 1373 | |
| 1256 | CSS |
돈도없어개발하기도시러
|
2년 전 | 1279 | |
| 1255 | 2년 전 | 3614 | |||
| 1254 | 2년 전 | 4797 | |||
| 1253 | 2년 전 | 1554 | |||
| 1252 | 레이아웃 |
swallow
|
2년 전 | 1786 | |
| 1251 | 웹접근성 |
두리삼촌v
|
2년 전 | 2060 | |
| 1250 | 레이아웃 |
두리삼촌v
|
2년 전 | 1694 | |
| 1249 | 레이아웃 |
두리삼촌v
|
2년 전 | 3220 | |
| 1248 | 기타 |
돈도없어개발하기도시러
|
2년 전 | 1151 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기