<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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 3015 |
HTML
SVG Star
|
| 3014 | |
| 3013 |
HTML
SVG Rectangle
|
| 3012 |
HTML
SVG Circle
|
| 3011 | |
| 3010 | |
| 3008 | |
| 3007 | |
| 3006 | |
| 3005 | |
| 3004 | |
| 3003 |
HTML
HTML5 Canvas
|
| 3002 |
HTML
HTML5 <footer> 요소
|
| 3001 |
HTML
HTML5 <header> 요소
|
| 3000 |
HTML
html5 태그 정의
|
| 2999 | |
| 2998 |
HTML
HTML5 <aside> 요소
|
| 2997 |
HTML
HTML5 <nav> 요소
|
| 2996 | |
| 2995 | |
| 2994 | |
| 2993 | |
| 2992 | |
| 2991 | |
| 2989 | |
| 2988 | |
| 2987 | |
| 2986 | |
| 2985 | |
| 2984 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기