w3.css

툴팁

문장 위에 마우스를 가져가면 추가 설명을 보여주는 툴팁을 만들어보자.

W3.CSS 도구 설명 클래스

W3.CSS는 다음과 같은 도구 설명 클래스를 제공한다.

Class	Defines
w3-tooltip	툴팁 요소
w3-text	툴팁 텍스트

도구 설명 요소 및 도구 설명 텍스트

HTML 요소 위로 마우스를 가져가면 도구 설명에 텍스트(또는 기타 콘텐츠)가 표시된다.

w3 -tooltip 클래스는 마우스로 가리킬 요소(도구 설명 컨테이너)를 정의한다.

w3 -text 클래스는 도구 설명 텍스트를 정의한다.

런던은 영국의 수도이다. (인구 900만명)

예제

<p class="w3-tooltip">London
<span class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>

태그로서의 도구 설명

런던은 주민 900만 명 영국의 수도이다.

예제

<p class="w3-tooltip">London
<span class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>

이미지 툴팁

효과를 보려면 이 사진 위로 마우스를 가져가세요.

그림 앞의 텍스트

<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-color 클래스를 사용한다.

예제

<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>

큰 툴팁

큰 툴팁을 원한다면 w3-large 클래스를 사용한다.

예제

<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>

애니메이션 툴팁

툴팁을 페이드 인하려면 w3-animate-opacity 클래스를 사용한다.

예제

<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>