|
Demo & Code |
| 툴팁 예제 1 | 툴팁 예제 2 | 툴팁 예제 3 |
<style>
dfn.demo_1 { background: rgba(0,0,0,0); margin-left:2px; font-style: normal; position: absolute; color:crimson }
dfn.demo_2 { background: rgba(0,0,0,0); margin-left:2px; font-style: normal; position: absolute; color:yellow }
dfn.demo_3 { background: rgba(0,0,0,0); margin-left:2px; font-style: normal; position: absolute; color:#fff }
dfn.demo_1::after { content: attr(data-info); display: inline; position: absolute; top: -14px !important; left: -280px; opacity: 0; width: 220px; font-size: 14px; text-align: center;
line-height: 1.5em; padding: 0.8em; background-color: crimson !important; color: #fff !important; pointer-events: none; transition: opacity 250ms, top 250ms; border-radius: 4px }
dfn.demo_1::before { content: ''; display: block; position: absolute; top: 12px !important; left: -60px; opacity: 0; width: 0; height: 0; border: solid transparent 5px;
border-bottom-color: crimson !important; transition: opacity 250ms, top 250ms; transform: rotate(90deg) }
dfn.demo_2::after { content: attr(data-info); display: inline; position: absolute; top: -74px !important; left: -84px; opacity: 0; width: 220px; font-size: 14px; text-align: center;
line-height: 1.5em; padding: 0.8em; background-color: yellow !important; color: #000 !important; pointer-events: none; transition: opacity 250ms, top 250ms; border-radius: 4px }
dfn.demo_2::before { content: ''; display: block; position: absolute; top: -10px !important; left: 14px; opacity: 0; width: 0; height: 0; border: solid transparent 5px;
border-bottom-color: yellow !important; transition: opacity 250ms, top 250ms; transform: rotate(180deg) }
dfn.demo_3::after { content: attr(data-info); display: inline; position: absolute; top: 10px !important; left: 84px; opacity: 0; width: 220px; font-size: 14px; text-align: center;
line-height: 1.5em; padding: 0.8em; background-color: #fff !important; color: #000 !important; pointer-events: none; transition: opacity 250ms, top 250ms; border-radius: 4px }
dfn.demo_3::before { content: ''; display: block; position: absolute; top: 21px !important; left: 74px; opacity: 0; width: 0; height: 0; border: solid transparent 5px;
border-bottom-color: #fff !important; transition: opacity 250ms, top 250ms; transform: rotate(270deg) }
dfn:hover { z-index: 2 } /* Keeps the info boxes on top of other elements */
dfn:hover::after, dfn:hover::before { opacity: 1 }
dfn:hover::after { top: 0px }
dfn:hover::before { top: 0px }
</style>
/* data-info 속성값이 툴팁임 */
<span>툴팁 <dfn class="demo_1" data-info="스크립트로 레이어를 생성해 놓고 보여주는 것이 아닌">예제 1</dfn></span>
<span>툴팁 <dfn class="demo_2" data-info="HTML에 툴팁 내용을 담은 특정태그를 집어넣는 방식이라">예제 2</dfn></span>
<span>툴팁 <dfn class="demo_3" data-info="해당 요소의 위치가 틀어질 수 있어 위치 잡기가 조금 까다로움...">예제 3</dfn></span>
|
다운로드 |
