CSS 도구 툴팁
- 이전 페이지 CSS 애니메이션
- 다음 페이지 CSS 이미지 스타일
通过 CSS 创建工具提示（Tooltip）。
演示：工具提示
예제
当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息：
基础的工具提示
创建一个鼠标移到元素上时显示的工具提示：
예제
<style>
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位工具提示文本 - 请看下面的例子 */
position: absolute;
z-index: 1;
}
/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
예제 설명
HTML：
컨테이너 요소(예: <div>)를 사용하여 그에 추가 "tooltip" 클래스에 위치합니다. 사용자가 이 <div>에 마우스를 hover할 때, 도구 툴팁 텍스트가 표시됩니다.
도구 툴팁 텍스트는 class="tooltiptext" 의 내장 요소(예: <span>)에 적용됩니다.
CSS를 사용하여
tooltip 클래스는 position:relative를 사용하여 도구 툴팁 텍스트를 배치합니다（position:absolute）。주의: 도구 툴팁을 배치하는 방법에 대한 자세한 내용은 아래의 예제를 참조하십시오.
tooltiptext 클래스는 실제 도구 툴팁 텍스트를 저장합니다. 기본적으로 숨겨져 있으며 마우스를 hover할 때 표시됩니다(아래 참조). 우리는 또한 일부 기본 스타일을 추가했습니다: 120픽셀의 너비, 검은색 배경, 흰색 텍스트, 텍스트 중앙 및 5픽셀의 상하 내쪽 마진(padding).
CSS border-radius 속성은 도구 툴팁 텍스트에 둥글게 표시합니다.
사용자가 class="tooltip"의 <div>에 마우스를 가져갔을 때,:hover 선택자는 도구 툴팁 텍스트를 표시합니다.
도구 툴팁을 정위치하는 방법
이 예제에서 툴팁은 "hover" 텍스트 (<div>)의 오른쪽에 위치합니다 (left:105%）。또한 주의하십시오:top:-5px 를 사용하여 그를 컨테이너 요소의 중앙에 배치합니다. 우리는 숫자 5을 사용한 이유는 툴팁 텍스트의 상하 내쪽 마진이 모두 5픽셀인 것입니다. 내쪽 마진을 증가시키면, 그와 동시에 증가시켜 주세요 top 속성 값이 중앙에 위치하도록 보장합니다. 도구 툴팁을 왼쪽에 위치시키려면 동일하게 적용됩니다.
오른쪽 도구 툴팁
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
결과:
왼쪽 도구 툴팁
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
결과:
도구 툴팁이 상단 또는 하단에 위치하려면 아래의 예제를 참조하십시오. 주의하십시오, 우리는 -60픽셀의 왼쪽 마진 속성 (margin-left)을 사용했습니다. 이는 툴팁과��지정된 텍스트를 중앙에 맞추기 위해 사용됩니다. 이 값은 툴팁 너비의 반 (120/2 = 60)입니다.
상단 도구 툴팁
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* 너비의 반 (120/2 = 60)을 사용하여 툴팁을 중앙에 맞추기 위해 사용됨 */
}
결과:
하단 도구 툴팁
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* 너비의 반 (120/2 = 60)을 사용하여 툴팁을 중앙에 맞추기 위해 사용됨 */
}
결과:
도구 툴팁 화살표
도구 툴팁의 지정된 측면에 표시되는 화살표를 생성하려면, 툴팁 뒤에 "빈" 내용을 추가하고, 패션 요소 클래스를 사용하십시오. ::after 와 content 속성. 화살표 자체는 경계선을 사용하여 생성됩니다. 이는 툴팁이 모양이 떠오르는 것처럼 보이게 합니다.
이 예제에서는 툴팁의 아래쪽에 화살표를 추가하는 방법을 보여줍니다:
아래쪽 화살표
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* 툴팁의 아래쪽으로 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: 검은색 투명 투명 투명;
}
결과:
예제 설명
화살표를 툴팁 내부에 정위치합니다:top: 100% 화살표를 툴팁의 아래쪽에 배치합니다.left: 50% 화살표를 중앙에 위치하게 합니다.
주의:border-width 속성은 화살표의 크기를 지정합니다. 이 설정을 변경하면, 다음을도 변경하도록 주의하세요: margin-left 값을 동일한 값으로 변경합니다. 이렇게 하면 화살표가 중앙에 위치하게 됩니다.
border-color 내용을 화살표로 변환하는 데 사용됩니다. 우리는 상단 경계선을 검은색으로 설정하고 나머지를 투명으로 설정했습니다. 모든 면이 검은색이면 최종적으로 검은색의 사각형 상자를 얻게 됩니다.
이 예제에서는 툴팁의 위쪽에 화살표를 추가하는 방법을 설명합니다. 주의하세요, 이번에는 아래 경계선의 색상을 설정했습니다:
위쪽 화살표
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* 툴팁의 위쪽으로 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: 투명 투명 검은색 투명;
}
결과:
이 예제에서는 툴팁의 왼쪽에 화살표를 추가하는 방법을 보여줍니다:
왼쪽 화살표
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* 툴팁의 왼쪽으로 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: 투명 검은색 투명 투명;
}
결과:
이 예제에서는 툴팁의 오른쪽에 화살표를 추가하는 방법을 보여줍니다:
오른쪽 화살표
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* 툴팁의 오른쪽으로 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: 투명 투명 투명 검은색;
}
결과:
빛나는 도구 툴팁(애니메이션)
도구 툴팁 텍스트가 점진적으로 나타나고 사라지기를 원하면 CSS transition 속성과 opacity 속성을 함께 사용하면 지정된 초수(예제에서는 1초) 동안 완전히 보이지 않는 상태에서 100％ 보이게 됩니다:
예제
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- 이전 페이지 CSS 애니메이션
- 다음 페이지 CSS 이미지 스타일
