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)에 tooltip 클래스를 사용 position:relative , 툴팁 텍스트 (배치하는 데 필요한 position:absolute .) 참고 : 도구 설명을 배치하는 방법에 대한 아래의 예를 참조하십시오.
tooltiptext 클래스는 실제 툴팁 텍스트를 보유하고있다. 그것은 기본적으로 숨겨져 있으며, (아래 참조) 호버에 표시됩니다. 120 픽셀의 폭, 검은 배경 색상, 흰색 텍스트 색상을 중심으로 텍스트 및 5px의 상단과 하단 패딩 : 우리는 또한 몇 가지 기본 스타일을 추가했습니다.
CSS3 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 픽셀의 값 속성입니다. 이 hoverable 텍스트 아래 / 위의 툴팁을 중심으로하는 것입니다. 그것은 툴팁의 폭 (= 60 2분의 120)의 절반으로 설정됩니다.
최고 툴팁
.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;
}
결과:
툴팁에서 페이드 (애니메이션)
이 볼 수 있도록 약 때 툴팁 텍스트에서 페이드하려는 경우, CSS3를 사용하여 transition 와 함께 속성을 opacity 특성, 및 (지정된 시간 (초)에 100 % 볼 수 완전히 보이지 않는 인에서 1 초 이동 )이 예에서 :
예
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} »그것을 자신을 시도 참고 : 전환 이후 우리의 튜토리얼 애니메이션에 대한 자세한 내용을 배울 것입니다.