HTML 및 CSS에서 툴팁을 추가하는 방법

도구 설명은 특히 선택된 요소에 대한 추가 세부 정보를 표시하기 위해 HTML에서 사용되는 방법입니다. 이는 사용자가 해당 요소에 대한 특정 정보를 표시하기 위해 도구 설명을 사용하는 요소 위로 마우스를 끌 때마다 마우스 가리키기 효과에서 수행할 수 있습니다.

툴팁은 클래스 툴팁 텍스트와 함께 주기적으로 div와 같은 인라인 요소로 사용됩니다. CSS를 사용하여 해당 도구 설명 텍스트에 대한 위치를 설정할 수 있습니다. CSS는 도구 설명에 일부 스타일과 위치를 나타낼 수 있도록 지원합니다.

HTML 및 CSS에 툴팁 추가

툴팁을 추가하려면 index.html과 style.css 파일 두 개를 만들어야 합니다. 또는 HTML 파일에도 CSS를 추가할 수 있습니다. 시작하겠습니다.

HTML 코드.

<div>Here is an examples of a <a class="tooltip" href="#">Tooltip<span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a></div>

CSS 코드

<style>
.tooltip {position: relative;}
.tooltip span {
 margin-left: -999em;
 position: absolute;
}
.tooltip:hover span {
 border-radius: 5px; 
 position: absolute; left: 1em; top: 2em; z-index: 99;
 margin-left: 0; width: 250px;
}
.classic { padding: 0.8em 1em; 
}
* html a:hover { background: transparent; }
.classic {background: #f3f4fe; border: 1px solid green; }
</style>

자세히 보기: Add Tooltips In HTML & CSS