최신 웹 개발 튜토리얼
 

W3.CSS툴팁


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


인라인 도구 설명 텍스트

아래의 문장 위로 마우스!

런던 9,000,000 잉글랜드의 수도 도시입니다.

W3-툴팁 클래스는 위로 마우스를 이동하는 HTML 요소 (도움말 컨테이너)를 정의합니다.

W3 텍스트 클래스는 툴팁 텍스트를 정의합니다 :

<p class="w3-tooltip">London
<span class="w3-text">9 million</span>
is the capital city of England</p>
»그에게 자신을보십시오

인라인 도움말 태그

아래의 문장 위로 마우스!

런던 9,000,000 잉글랜드의 수도 도시입니다.

W3-툴팁 클래스는 위로 마우스를 이동하는 HTML 요소 (도움말 컨테이너)를 정의합니다.

W3 텍스트 클래스는 툴팁 텍스트를 정의합니다 :

<p class="w3-tooltip">London
<span class="w3-text w3-tag">9 million</span>
is the capital city of England</p>
»그에게 자신을보십시오

큰 툴팁

효과를 보려면이 사진 위로 마우스를 이동 :

차

자동차 교통에 사용되는 휠, 자체 전원 공급 차량입니다. 용어의 대부분의 정의 자동차는 일반적으로 네 바퀴를 지정. (위키 백과)

W3-툴팁 클래스는 위로 마우스를 이동하는 HTML 요소 (도움말 컨테이너)를 정의합니다.

W3 텍스트 클래스는 툴팁 텍스트를 정의합니다 :

예 (사진 전에 텍스트)

<div class="w3-tooltip">

<p class="w3-text">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)</p>

<img src="img_car.jpg" alt="Car" style="width:100%">

</div>
»그에게 자신을보십시오

예 (그림 후 텍스트)

<div class="w3-tooltip">

<img src="img_car.jpg" alt="Car" style="width:100%">

<p class="w3-text">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)</p>

</div>
»그에게 자신을보십시오

절대 툴팁

당신이 툴팁은 절대 위치에 표시 할 경우, 툴팁 텍스트 (W3-텍스트) 위치 :

<p class="w3-tooltip">London is the capital city of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9million</span></p>
»그에게 자신을보십시오

컬러 툴팁

당신이 색깔의 툴팁을하려면 W3 컬러 클래스를 사용 :

<span class="w3-text w3-tag w3-red ">9 million</span>
»그에게 자신을보십시오

둥근 도움말

당신이 둥근 도구 설명을하려면 W3 라운드 클래스를 사용 :

<span class="w3-text w3-tag w3-round ">9 million</span>
»그에게 자신을보십시오

작은 도구 설명

당신이 작은 도구 설명을하려면 W3-작은 클래스를 사용 :

<span class="w3-text w3-tag w3-small ">9 million</span>
»그에게 자신을보십시오

작은 도구 설명

당신이 작은 도구 설명을하려면 W3-작은 클래스를 사용 :

<span class="w3-text w3-tag w3-tiny ">9 million</span>
»그에게 자신을보십시오

큰 툴팁

당신은 큰 툴팁을하려면 W3 대형 클래스를 사용 :

<span class="w3-text w3-tag w3-xlarge ">9 million</span>
»그에게 자신을보십시오