[HTML] 웹페이지에서 마우스 툴팁(Tooltip; 말풍선) 태그(Tag)

화면의 어떤 요소에 마우스 커서를 가져가면 작은 창이 뜨며, 설명이나 간단한 도움말을 보여주는 것을 "툴팁(Tooltip)"이라고 합니다. 쉽게, 말풍선으로 부르기도 합니다.

HTML에서는 title 속성으로 말풍선을 만듭니다. 사용법은 다음과 같습니다:

텍스트 링크에 말풍선 붙이기

테스트:
여기로 마우스 커서를

코드:

이미지에 말풍선 붙이기

테스트:


코드:

이미지 링크에 말풍선 붙이기

테스트:


코드:

문단 등 기타 요소에 말풍선 붙이기

<p></p> 나 <span></span> 이나 <div></div> 태그 등 거의 모든 HTML 태그에 타이틀 속성을 추가할 수 있습니다.

테스트:

갑자기 차 소리가 나더니, 내 곁으로 버스가 지나가고 있다. 단지 입구의 정류장을 거쳐 온 버스인 듯하다. 지나가는 버스의 차창 안에서 눈빛이 나를 보고 있다. 나와 저 눈빛은 아무런 관련이 없다. 그것은 아파트 단지도 마찬가지이다. 만(萬)에 하나, 관련이 있다고 해도 그것은 이를테면, '뙤약볕이 걸어가는 한낮'과 '풀잎 속의 한 떨기 어둠'보다도 더 먼 관련이다.

코드:






참고 게시물:
[HTML] title(타이틀;말풍선) 속성과, img 태그의 alt 속성의, 차이점


☞ HTML | CSS | 자바스크립트 JavaScript