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

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

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>

자세히 알고 싶으시면 클릭how to Add Tooltips in HTML & CSS

라이브 보기Demo

이 게시물이 마음에 드시기 바랍니다. 질문이 있으시면 아래에서 토론하여 개선에 도움을 주십시오. 고맙습니다.