여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 툴팁
w3.css – 툴팁
2개월전 작성
3개월전 수정

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>
기본 예시
예제 보기

이미지 툴팁

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

자동차

자동차는 운송에 사용되는 바퀴가 달린 자체 동력 자동차입니다. 대부분의 용어 정의에서는 자동차에 일반적으로 바퀴가 4개 있다고 명시합니다.(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를 사용하여 도구 설명 텍스트를 배치한다.

런던은 주민 900만 명 영국의 수도이다.
예제
<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>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그