W3.CSS 툴팁
아래 문장 위로 마우스를 가져갑니다.
런던 은 잉글랜드의 수도입니다.(9 million inhabitants)
런던 9 million inhabitants 은 잉글랜드의 수도입니다.
W3.CSS 도구 설명 클래스
W3.CSS는 다음과 같은 도구 설명 클래스를 제공합니다.
| 등급 | 정의 |
|---|---|
| w3-도구 설명 | 툴팁 요소 |
| w3-텍스트 | 툴팁 텍스트 |
도구 설명 요소 및 도구 설명 텍스트
도구 설명은 HTML 요소 위로 마우스를 가져가면 텍스트(또는 기타 콘텐츠)를 표시합니다.
w3-tooltip 클래스는 마우스 오버할 요소(도구 설명 컨테이너)를 정의합니다 .
w3-text 클래스 는 툴팁 텍스트를 정의합니다.
아래 문장 위로 마우스를 가져갑니다.
런던 은 잉글랜드의 수도입니다.(9 million inhabitants)
예시
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
태그로서의 툴팁
아래 문장 위로 마우스를 가져갑니다.
런던 9 million inhabitants 은 잉글랜드의 수도입니다.
예시
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
이미지 툴팁
효과를 보려면 이 사진 위로 마우스를 가져갑니다.
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)
예(그림 앞의 텍스트)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
예(그림 뒤에 있는 텍스트)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
절대 위치 툴팁
툴팁을 절대 위치에 표시하려면 CSS를 사용하여 툴팁 텍스트를 배치합니다.
예시
<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
컬러 툴팁
컬러 툴팁을 원하면 w3- 컬러 클래스 를 사용하십시오.
예시
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
둥근 툴팁
둥근 툴팁을 원하면 w3-round 클래스를 사용 하십시오 .
예시
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
작은 툴팁
작은 툴팁을 원하면 w3-small 클래스 를 사용하십시오.
예시
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
작은 툴팁
작은 툴팁을 원하면 w3-tiny 클래스 를 사용하십시오.
예시
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
큰 툴팁
If you want a large tooltip, use the w3-large classes:
Example
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
Animated Tooltip
If you want to fade in the tooltip, use the w3-animate-opacity class:
Example
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>