CSS 툴팁
CSS로 툴팁을 만드세요.
데모: 도구 설명 예
도구 설명은 사용자가 요소 위로 마우스 포인터를 이동할 때 무언가에 대한 추가 정보를 지정하는 데 자주 사용됩니다.
기본 툴팁
사용자가 요소 위로 마우스를 이동할 때 표시되는 도구 설명을 만듭니다.
예시
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
예시 설명
HTML: 컨테이너 요소(예: <div>)를 사용하고
여기에 "tooltip"클래스를 추가합니다. 사용자가 이 <div> 위에 마우스를 올리면 툴팁 텍스트가 표시됩니다.
툴팁 텍스트는 를 사용하여 인라인 요소(예: <span>) 안에 배치됩니다 class="tooltiptext".
CSS: 툴팁 텍스트( )를 배치하는 데 필요한 클래스 tooltipuse .
참고: 도구 설명을 배치하는 방법은 아래 예를 참조하십시오.position:relativeposition:absolute
클래스 는 tooltiptext실제 툴팁 텍스트를 보유합니다. 기본적으로 숨겨져 있으며 마우스를 가져가면 표시됩니다(아래 참조). 120px 너비, 검정색 배경색, 흰색 텍스트 색상, 가운데 텍스트, 5px 상단 및 하단 패딩과 같은 몇 가지 기본 스타일도 추가했습니다.
CSS border-radius속성은 툴팁 텍스트에 둥근 모서리를 추가하는 데 사용됩니다.
:hover선택자는 사용자가 로 <div> 위로 마우스를 이동할 때 툴팁 텍스트를 표시하는 데 사용 됩니다 class="tooltip".
포지셔닝 툴팁
left:105%이 예에서 툴팁은 "hoverable" 텍스트(<div>) 의 오른쪽( )에 배치됩니다 . 또한 top:-5px컨테이너 요소의 중간에 배치하는 데 사용됩니다. 툴팁 텍스트의 상단 및 하단 패딩이 5px이기 때문에 숫자 5 를 사용합니다. 패딩을 늘리면 top속성 값도 높여 중간에 유지되도록 합니다(원하는 경우). 툴팁을 왼쪽에 배치하려는 경우에도 동일하게 적용됩니다.
오른쪽 툴팁
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
결과:
왼쪽 툴팁
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
결과:
툴팁을 상단이나 하단에 표시하려면 아래 예를 참조하세요. margin-left마이너스 60픽셀 값으로 속성을 사용한다는 점에 유의하십시오 . 이것은 호버블 텍스트 위/아래에 툴팁을 중앙에 배치하기 위한 것입니다. 툴팁 너비의 절반(120/2 = 60)으로 설정됩니다.
상단 툴팁
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
결과:
하단 툴팁
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
결과:
툴팁 화살표
툴팁의 특정 면에서 나타나야 하는 화살표를 생성하려면 속성과 함께 의사 요소 클래스 ::after와 함께 툴팁 뒤에 "빈" 콘텐츠를 추가 content
합니다. 화살표 자체는 테두리를 사용하여 생성됩니다. 이렇게 하면 도구 설명이 말풍선처럼 보입니다.
이 예에서는 도구 설명 하단에 화살표를 추가하는 방법을 보여줍니다.
아래쪽 화살표
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
결과:
예시 설명
도구 설명 내부에 화살표 배치: 도구 top: 100%설명 하단에 화살표를 배치합니다. left: 50%화살표를 중앙에 배치합니다.
참고:border-width 속성은 화살표의 크기를 지정합니다 . 이것을 변경하면 margin-left값도 동일하게 변경하십시오. 이렇게 하면 화살표가 중앙에 유지됩니다.
border-color내용을 화살표로 변환하는 데 사용됩니다 . 상단 테두리를 검은색으로 설정하고 나머지는 투명하게 설정합니다. 모든 면이 검은색이면 검은색 사각형 상자가 됩니다.
이 예에서는 도구 설명 상단에 화살표를 추가하는 방법을 보여줍니다. 이번에는 하단 테두리 색상을 설정했습니다.
위쪽 화살표
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
결과:
이 예에서는 도구 설명 왼쪽에 화살표를 추가하는 방법을 보여줍니다.
왼쪽 화살표
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
결과:
이 예에서는 도구 설명 오른쪽에 화살표를 추가하는 방법을 보여줍니다.
오른쪽 화살표
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
결과:
페이드 인 툴팁(애니메이션)
툴팁 텍스트가 표시되려고 할 때 페이드 인하 transition려면 속성과 함께 CSS 속성을 사용하고 opacity
지정된 시간(우리의 경우 1초 예시):
예시
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}