HTML 툴팁

툴팁은 특별히 선택된 요소에 대한 추가 정보를 표시하기 위해 HTML에서 사용되는 개념입니다. 이는 사용자가 도구 설명을 사용하여 해당 요소에 대한 지정된 정보를 표시하는 요소 위로 마우스를 이동할 때마다 마우스 호버 효과에서 수행될 수 있습니다.

span과 같은 인라인 요소로 사용되며 때로는 클래스 툴팁 텍스트와 함께 사용됩니다. CSS를 사용하여 해당 도구 설명 텍스트의 위치를 ​​설정할 수 있으며, 이는 도구 설명의 일부 스타일과 위치를 정의하는 데 도움이 됩니다. 웹페이지에 툴팁을 사용하면 포함된 요소에 대한 간략한 정보를 제공하므로 사용자와 더 많은 상호 작용을 하는 데 도움이 됩니다.

구문

HTML은 제목 속성이 있는 링크를 이용하여 툴팁을 정의하는 방식을 사용합니다. 다음과 같이 정의할 수 있습니다:

<a href="" title="tooltip_text"> Content </a>

위 구문에서 볼 수 있듯이 제목 속성에 표시되는 텍스트는 도구 팁 텍스트로 간주됩니다. 따라서 사용자는 이 링크를 클릭하여 이에 대한 자세한 정보를 볼 수 있습니다.

제목은 전역 속성으로 간주되므로 사용자가 요소에 클래스나 ID를 추가하는 것만큼 간단하게 제목을 요소에 추가할 수 있습니다. 이를 통해 전체 열과 더 많은 항목을 포함하는 단락, div 블록 등 무엇이든 간단히 추가할 수 있습니다. 기본적으로 툴팁은 요소 상단에 표시됩니다. 툴팁을 위쪽, 아래쪽, 왼쪽 또는 오른쪽과 같은 위치에 배치할 수 있습니다. CSS에 정의된 일부 값을 사용하여 툴팁에 이 위치를 지정합니다.

HTML에 도구 설명을 추가하는 방법은 무엇입니까?

HTML 요소에 도구 설명을 추가할 수 있습니다. div, 단락 및 기타 여러 요소와 같은 요소도 사용합니다. 해당 특정 속성 위에 마우스를 올리면 텍스트나 도구 설명으로 알려진 기타 정보가 표시됩니다. 텍스트의 어느 위치에나 오른쪽, 왼쪽, 위쪽, 아래쪽에 표시할 수 있습니다. 다음과 같습니다.

1. 최고 위치

이 위치에서는 요소 상단에 툴팁이 표시됩니다.

코드:

.tooltip.tooltiptext{
width: 160px;
bottom:80%;
left:40%;
margin-left: 80px;
}

2. 올바른 위치

이 툴팁 코드는 요소 오른쪽에 툴팁이 표시됩니다.

코드:

.tooltip.tooltiptext{
top:4px;
left:100%;
}

3. 왼쪽 위치

이 툴팁 코드는 요소 왼쪽에 툴팁이 표시됩니다.

코드:

.tooltip.tooltiptext{
top:4px;
right:100%;
}

4. 최하위 위치

이 위치에서는 요소 하단에 툴팁이 표시됩니다.

코드:

.tooltip.tooltiptext{
width: 160px;
top:100%;
left:40%;
margin-left: 80px;
}

또한 정의된 이 툴팁 기능을 사용하여 요소에 화살표가 있는 툴팁을 표시할 수도 있습니다. HTML 툴팁은 링크된 웹페이지, 관련 문서 또는 이미지를 여는 데에도 도움이 됩니다. 툴팁을 사용하면 애니메이션 효과처럼 페이드 인이 포함된 툴팁이 표시되는 것을 표시할 수 있습니다. 다음과 같은 코드를 사용하여 이를 수행할 수 있습니다.

 코드:

.tooltip.tooltiptext{
opacity:0;
transition: opacity 5s;
}
.tooltip:hover.tooltiptext{
opacity:0;

가장 중요한 작업은 툴팁을 사용하여 단일 툴팁을 클릭하여 모달 상자를 여는 것입니다. 이러한 유형의 코드는 간단한 링크를 사용하여 일종의 양식이나 기타 세부 정보를 열어야 할 때마다 주로 사용됩니다. 이는 최소한의 코드로 모달을 여는 가장 간단한 방법으로 간주됩니다.

HTML 도구 설명의 예

다음은 HTML 툴팁의 예입니다.

예시 #1

오른쪽, 왼쪽 값으로 툴팁의 위치를 ​​보여주는 예시입니다.

HTML 코드:

<style>
/*right position*/
.tooltipright{
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipright .toolttext {
visibility: hidden;
width: 200px;
height:100px;
background-color:lightsalmon;
color: black;
text-align: center;
border-radius: 4px;
padding: 8px ;
/* Position the tooltip */
position: absolute;
z-index: 0;
left: 110%;
}
.tooltipright .toolttext {
visibility: visible;
}
/*left position*/
.tooltipleft{
position: relative;
display: inline-block;
border-bottom: 2px dotted blue;
}
.tooltipleft .toolttextleft {
visibility: hidden;
width: 200px;
height:50px;
background-color:lightsalmon;
color: black;
text-align: center;
border-radius: 4px;
padding: 5px ;
/* Position the tooltip */
position: absolute;
z-index: 1;
right: 130%;
}
.tooltipleft:hover .toolttextleft {
visibility: visible;
}
</style>

<h2 id="Tooltip-with-different-Position">Tooltip with different Position</h2>
<p style="color :crimson;">Tooltip with Right position</p>
<div class="tooltipright">What is Web Development?
<span class="toolttext">Web Development is a technology used for developing websites, Designing Single page application's webpage etc.</span>
</div>
<br>
<p style="color :crimson;">Tooltip with Left position</p>
<div class="tooltipleft">What is HTML?
<span class="toolttextleft">HTML is markup language for designing web pages for browser. </span>
</div>

출력:

예시 #2

이 예는 이미지뿐만 아니라 일부 링크에서도 툴팁을 사용할 수 있음을 보여줍니다. 따라서 사용자가 마우스를 올리면 정보가 표시되거나 다른 웹페이지나 문서를 열 수 있는 클릭 가능한 링크가 표시됩니다.

HTML 코드:

<title>HTML tooltip</title>


<h4 id="HTMl-Tooptip-working-on-Image-and-Link">HTMl Tooptip working on Image and Link</h4>
<img  src="/static/imghwm/default1.png" data-src="../Desktop/EDUCBA.png" class="lazy" title="EDUCBA"   style="max-width:90%" alt="HTML 툴팁" >
<br>
<a href="https://www.educba.com/" title="All About EDUCBA.">
Online Training and Video Courses</a>

출력:

사용자가 특정 링크를 클릭할 때마다 다음과 같이 연결된 웹페이지가 표시됩니다.

예시 #3

마우스를 올리면 팝업이 표시되거나 특정 요소를 클릭할 때마다 툴팁을 사용하면 이 작업을 쉽게 처리할 수 있습니다.

HTML 코드:

<title>HTML tooltip</title>

<style>
.arrowpopup {
position: relative;
display: inline-block;
cursor: pointer;
}
.arrowpopup .tooltiptext {
visibility: hidden;
width: 160px;
background-color: #856;
color: white;
text-align: center;
border-radius: 4px;
padding: 9px ;
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -85px;
}
.arrowpopup .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #856 transparent transparent transparent;
}
.arrowpopup .show {
visibility: visible;
}
</style>

<div class="arrowpopup" onclick="myFunction()">Tooltip Demo Click here!
<span class="tooltiptext" id="tooltipdemo">HTML Tooltip helps you to display extra information of element.</span>
</div>
<script>
function myFunction() {
var tt = document.getElementById("tooltipdemo");
tt.classList.toggle("show");
}
</script>

출력:

결론

위의 모든 정보를 통해 우리는 도구 설명이 선택한 요소에 대한 일부 관련 정보나 간단한 설명을 표시하는 데 사용되는 HTML의 기능이라는 것을 깨달았습니다. 사용자의 선택에 따라 요소에 따라 이 도구 설명이 표시되는 위치를 결정할 수 있습니다. 위치 값은 오른쪽, 왼쪽, 위쪽 또는 아래쪽입니다.

위 내용은 HTML 툴팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!