CSS로 마우스 오버 시 툴팁 출력하는 법

쇼케이스

위 ‘mouse hover’에 마우스를 올리면 툴팁이 나타난다.

코드

HTML

<div class="container" tooltip="This is tooltip">mouse hover</div>

• class="container": 툴팁을 표시할 요소를 감싸는 컨테이너 역할을 한다.
• tooltip: 툴팁으로 출력할 내용을 지정한다.

CSS

다음은 간단하게 테스트 할 수 있도록 HTML 코드 그대로 쓰여진 CSS다. 실제로는 별도의 CSS 파일에 작성하는 것이 좋다.

<style>
.container {
    position: relative;
}

.container:hover::after {
    content: attr(tooltip);

    background-color: rgba(0, 0, 0, 0.5);
    color: white;
  }
</style>

• .container:hover::after: container 클래스를 가진 요소에 마우스를 올렸을 때 after 가상 요소 선택자에 대한 스타일을 정의한다. 이를 가상 요소라 부르는 이유는 이들이 실제 컨텐츠 영역을 가지지 않기 때문이다.
• content: attr(tooltip): tooltip 속성의 값을 툴팁으로 표시한다.