CSS 툴팁

.tooltip:hover .contents 스타일

마지막으로 .tooltip:hover .contents라는 규칙을 정의했습니다. 이 규칙은 사용자가 클래스 이름이 tooltip인 요소 위로 마우스를 가져갈 때 도구 설명 텍스트를 표시하는 데 사용됩니다. .

이 규칙이 실행되면 .contents 요소의 가시성이 visible로 설정됩니다. . 즉, 사용자가 도구 설명 위로 마우스를 가져가면 도구 설명이 웹 페이지에 표시됩니다.

CSS 도구 설명 배치

위의 예에서 사용자가 Prepare the baking tray 레이블 위로 마우스를 가져가면 텍스트 오른쪽에 툴팁이 나타납니다. . 그러나 툴팁이 텍스트의 다른 가장자리에 나타나도록 사용자 정의할 수 있습니다.

올바른 위치

이전 코드는 이미 툴팁을 텍스트 오른쪽에 배치했습니다. 그러나 이미 다른 방식으로 표시되도록 도구 설명의 스타일을 지정했고 도구 설명을 올바른 위치로 다시 이동하려는 경우 다음 코드를 사용할 수 있습니다.

.tooltip .contents {
	top: -5px;
	left: 105%;
}

이 CSS 규칙은 이전 코드와 결합될 때 도구 설명을 텍스트 오른쪽에 배치합니다. top:-5px 규칙은 도구 설명을 컨테이너 요소의 중심에 정렬합니다. 왼쪽:105% 규칙은 도구 설명 너비의 105%만큼 왼쪽에 있는 도구 설명의 위치를 ​​오프셋하기 때문에 도구 설명을 컨테이너 오른쪽에 배치합니다.

코드는 다음을 반환합니다.

보시다시피 툴팁은 텍스트 오른쪽에 나타납니다.

왼쪽 위치

툴팁이 텍스트 왼쪽에 나타나길 원한다고 가정합니다. 다음 코드를 사용하여 이를 수행할 수 있습니다.

.tooltip .contents {
	top: -5px;
	right: 105%;
}

이 코드는 이전 코드에 추가되었을 때 도구 설명을 텍스트 왼쪽에 배치합니다. top:-5px 규칙은 마지막 예제에서 논의한 것처럼 도구 설명을 컨테이너의 중심에 정렬합니다. 오른쪽:105% 규칙을 사용하면 도구 설명을 컨테이너 왼쪽에 배치할 수 있습니다(또는 도구 설명 너비의 105%만큼 오른쪽 도구 설명 위치를 오프셋).

코드가 반환하는 내용은 다음과 같습니다.

툴팁은 텍스트 왼쪽에 나타납니다.

상위 위치

툴팁이 텍스트 위에 나타나길 원한다고 가정해 보겠습니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

.tooltip .contents {
	bottom: 100%;
	left: 50%;
	margin-left: -60px;
}

코드는 다음을 반환합니다.

이 예에서는 세 가지 CSS 스타일을 사용하여 텍스트 위에 툴팁을 배치했습니다. 하단:100% 및 왼쪽:50% 스타일을 사용하면 툴팁 레이블 너비의 100%만큼 툴팁을 오프셋할 수 있습니다(prepare the baking tray ) 툴팁 레이블의 하단과 왼쪽에서 각각.

margin-left 스타일을 사용하면 툴팁을 중앙에 배치할 수 있습니다. 툴팁의 너비가 120px이기 때문에 margin-left 값을 -60px(120px의 절반)로 지정했습니다. 이렇게 하면 툴팁이 툴팁 레이블 위에 중앙에 표시됩니다.

하단 위치

prepare the baking tray 아래에 툴팁이 나타나길 원한다고 가정해 보겠습니다. . 상표. 다음 코드를 사용하여 그렇게 할 수 있습니다.

.tooltip .contents {
	top: 100%;
	left: 50%;
	margin-left: -60px;
}

코드는 다음을 반환합니다.

우리 코드는 Top Position과 동일한 스타일을 사용합니다. 한 가지 예외가 있는 예입니다. 이 예에서는 top:100% 스타일을 사용합니다(마지막 예에서 사용한 것처럼 bottom:100% 대신). 이 스타일을 사용하면 도구 설명 레이블 너비의 100%만큼 도구 설명 상자를 오프셋할 수 있습니다(prepare the baking tray .)를 사용하여 레이블 아래에 도구 설명 상자를 배치할 수 있습니다.

도구 설명 페이드 인

도구 설명을 디자인할 때 사용자가 도구 설명 위로 마우스를 가져갈 때 도구 설명 텍스트가 희미해지도록 결정할 수 있습니다. 이렇게 하면 도구 설명이 사용자 화면에 표시되도록 설정되어 있을 때 더 미학적으로 보기 좋은 전환을 만들 수 있습니다.

페이드 인 툴팁을 만드는 데 사용할 수 있는 스타일은 다음과 같습니다.

.tooltip .contents {
	opacity: 0;
	transition: opacity 2s;
}

.tooltip:hover .contents {
	opacity: 1;
}

이 스타일을 첫 번째 예제의 코드와 결합하면 페이드 인 효과를 얻을 수 있습니다. 이것이 어떻게 작동하는지 분석해 보겠습니다. 먼저 툴팁의 불투명도를 0으로 지정합니다. 이는 툴팁이 숨겨져 있음을 의미합니다.

그런 다음 opacity와 2의 두 값으로 transition 속성을 지정합니다. opacity 전환에 적용하려는 CSS 속성을 참조하고 2s 전환 기간(초)을 나타냅니다.

다음으로, 사용자가 툴팁 위로 마우스를 가져갈 때 툴팁의 불투명도를 1로 설정하는 .tooltip:hover .contents 규칙을 만듭니다.

이를 통해 사용자가 툴팁 위로 마우스를 가져가면 요소가 완전히 불투명한(보이지 않는) 상태에서 완전히 보이는 상태로 전환되는 효과를 얻을 수 있습니다. 전환 기간을 2로 지정했기 때문에 이 전환을 완료하는 데 2초가 걸립니다.

CSS 전환에 대해 자세히 알아보려면 CSS 전환 속성에 대한 가이드를 읽어보세요.

결론

도구 설명은 웹 페이지에 추가 정보를 표시하는 데 사용됩니다. HTML 및 CSS의 도움으로 웹 페이지에 추가 정보를 표시할 수 있는 미학적으로 보기 좋은 도구 설명 요소를 디자인할 수 있습니다.

이 자습서에서는 예제를 참조하여 CSS에서 도구 설명을 만드는 방법과 도구 설명을 레이블의 왼쪽, 오른쪽, 아래쪽 및 위쪽에 배치하는 방법을 살펴보았습니다. 또한 사용자가 툴팁 레이블 위로 마우스를 가져갈 때 트리거되는 페이드 인 효과를 만드는 방법에 대해 논의했습니다.

이제 전문 웹 디자이너처럼 CSS 도구 설명을 디자인하는 데 필요한 지식을 얻었습니다!