종종 웹 사이트에 대한 추가 정보예를 들어, 복잡한 약어를 해독하거나 사용자 작업을 명확히하기 위해 마우스 오버 툴팁의 형태로 배치됩니다. 이 프런트 엔드 솔루션을 도구 설명이라고합니다. 기본 데이터 만 표시하여 페이지의 공간을 절약하지만 독자는 필요한 경우 추가 내용을 참조 할 수 있습니다. 순수하게 정보를 제공하는 기능 외에도 도구 설명은 사이트의 전체 스타일을 강조하고 관심을 끄는 중요한 디자인 요소가 될 수 있습니다.
툴팁 블록 동작
도구 설명이 나타나는 상호 작용 요소를 대상 요소라고합니다.
팝업 블록에는 일반적으로 중요한,기본 정보는 아닙니다. 사용자가 원할 때만 읽어야한다고 가정합니다. 주요 콘텐츠를 성가 시게하거나 방해하거나주의를 분산시키지 않으려면 툴팁이 다음과 같은 여러 요구 사항을 충족해야합니다.
- 매끄러운 외관.실수로 대상 요소 위로 마우스를 가져 가면 툴팁이 갑자기 튀어 나와서는 안됩니다. 작은 텍스트 상자에는 여전히 허용 될 수 있지만 도구 설명이 크거나 이미지가 포함 된 경우에는 부적절합니다.
- 적절한 숙박.사용자가 데이터를 일치시킬 수 있도록 프롬프트 창에서 설명하는 내용을 가리지 않아야합니다. 툴팁이 주로 장식적인 경우 허용됩니다.
- 다른 콘텐츠에 영향을 미치지 않습니다.툴팁은 사용자에게 거의 보이지 않는 작은 도우미이므로 불편하지 않아야합니다. 올바른 툴팁은 인접한 블록을 이동하거나 페이지에서 벗어나 스크롤바를 생성하지 않습니다.
- 시계. 도구 설명은 전체적으로 표시되어야하며 다른 요소와 겹치거나 브라우저 창의 가장자리 뒤에 숨겨서는 안됩니다.
- 관리 용이성. 사용자가 도구 설명을 호출하고 제거하는 방법을 직관적으로 이해하고 이러한 작업에 어려움이없는 것이 중요합니다.
순수 HTML의 툴팁
힌트를 만드는 기능은 웹 페이지의 하이퍼 텍스트 마크 업 언어에 있습니다. 처음에는 약어와 복잡한 과학 용어를 해독하기위한 것이 었습니다.
이러한 팝업 블록을 생성하려면 HTML 태그에 사용할 수있는 제목 속성이 필요합니다.
<p> Proxima Centauri는4.22 <i title = "9 460 730 472 580800 미터"> 광년 </ i> 지구에서 태양까지의 거리의 27 만 배입니다. </ p> <img title = "Neuschwanstein Castle"src = "/ images / disney.jpg">
HTML 툴팁의 주요 장점은 텍스트에서 이미지에 이르기까지 모든 레이아웃 요소와 함께 사용하기 쉬우 며 사용할 수 있다는 것입니다. 그러나 그녀는 또한 큰 단점이 있습니다.
- 텍스트 서식을 지정할 수 없습니다.
- 변경할 수없는 너무 단순한 모양;
- 이미지를 삽입 할 수 없습니다.
HTML 제목 속성은 특별한 스타일이 필요하지 않은 작은 팁에만 적합합니다. 그렇지 않으면 CSS를 사용하여 도구 설명을 만드는 방법을 아는 것이 좋습니다.
CSS 도움말
계단식 스타일 시트를 사용하여 멋진 사용자 지정 힌트 블록을 만들 수 있습니다. 기본 CSS 개념을 사용합니다.
- 절대 위치-문서의 일반적인 흐름에서 힌트를 꺼내기 위해;
- 속성을 사용하여 비활성 상태의 블록을 완전히 숨기기
디스플레이; - 의사 클래스
: 호버, 마우스 커서 아래의 모든 요소에 할당됩니다. - 의사 요소
: 이전및: 이후별도의 HTML 요소를 만들지 않도록 간단한 프롬프트에 사용할 수 있습니다. - 아름다운 페이드 인 및 아웃 효과를위한 애니메이션 및 페이딩.
이러한 모든 속성은 최신 브라우저에서 잘 지원되므로 도구 설명 메커니즘을 안정적으로 만듭니다.
의사 클래스 : 호버는 커서를 가리킬뿐만 아니라 터치 스크린에서 손가락 터치에도 반응하므로 모바일 장치를 지원할 수 있습니다.
블록 또는 의사 요소
CSS 툴팁은 자체 구조를 가진 별도의 HTML 블록이거나 다른 블록의 의사 요소 일 수 있습니다. 이러한 각 옵션에는 장단점이 있습니다.
별도의 컨테이너 내에서 콘텐츠를 조작하는 것이 훨씬 쉽습니다. 이미지, 헤더 및 기타 요소를 배치 할 수 있습니다.
의사 요소를 사용하면 불필요한블록을 만들고 레이아웃을 조금 더 쉽게 만듭니다. 텍스트 콘텐츠는 대상 요소의 속성에 배치 할 수 있으며 툴팁 자체를 만드는 것에 대해 걱정할 필요가 없습니다. 모든 작업은 CSS에 의해 수행됩니다. 그러나 의사 요소는 복잡한 구조를 가진 블록에는 적합하지 않습니다. 또한 닫기 태그에 대해서만 생성 할 수 있습니다. 이러한 힌트는 이미지에 직접 첨부 할 수 없습니다.
CSS 팝업 블록 만들기
Centaurus 별자리에서 가장 가까운 별에 대한 복잡한 구조로 멋지게 디자인 된 툴팁을 만들어 보겠습니다.
먼저 HTML 마크 업을 정의 해 보겠습니다.
<h2> 별자리 Centaurus의 별 </ h2> <ulclass = "stars"> <li class = "star"> 알파 센타 우리 </ li> <li class = "star"> 베타 센타 우리 </ li> <li class = "star"> Theta Centauri </ li> <li class = "star"> 감마 센타 우리 </ li> <li class = "star"> Epsilon Centauri </ li> <li class = "star"> 프록시마 센타 우리 <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (Latin proxima-가장 가까운)는 태양 다음으로 지구에서 가장 가까운 별인 Alpha Centauri에 속하는 적색 왜성입니다. </ div> </ li> </ ul>CSS를 사용하여 힌트 블록의 스타일을 지정하고 숨 깁니다.
.별 { 위치:상대적인; } / * 툴팁 스타일 * / .star .tooltip { 디스플레이 : 없음; 위치 : 절대; 상단 : 50 %; 변환 : translateY (-50 %); 왼쪽 : 100 %; } / * 장식용 삼각형 스타일 * / .star .tooltip : {...} 이전 / * 마우스 오버시 팝업 툴팁 * / .star : hover .tooltip {display : block; }
목록 및 도구 설명 자체의 스타일은 무엇이든 될 수 있으며 간결성을 위해 생략되었습니다.
툴팁을 별도의 블록에 배치하면 그 안에 이미지를 사용하고 텍스트 서식을 지정하고 아름다운 디자인을위한 의사 요소를 만들 수도 있습니다.
의사 요소의 도구 설명
툴팁 생성 시연의사 요소는 그래픽 편집기 패널을 돕습니다. 각 도구는 아이콘 형태로 제공되며, 경험이없는 사용자는 그 목적을 이해할 수 없습니다. 아무도 불행하지 않도록 이름이있는 힌트를 아이콘에 추가해야합니다.
패널의 HTML 코드는 다음과 같습니다.
<div class = "instruments"> <div class = "instrument"data-tooltip = "브러시"> <img src = "/ images / brush-icon.svg"> </ div> <div class = "instrument"data-tooltip = "Fill"> <img src = "/ images / color-fill-icon.svg"> </ div> <div class = "instrument"data-tooltip = "Zoom in"> <img src = "/ images / zoom-in-icon.svg"> </ div> <div class = "instrument"data-tooltip = "Zoom out"> <img src = "/ images / zoom-out-icon.svg"> </ div> </ div>기기의 고유 한 이름이 속성에 배치됩니다. 데이터 도움말... 블록 안에 아이콘이 있지만 HTML 코드에는 툴팁 자체가 없습니다.
툴팁에는 짧은 설명 텍스트 만 포함되므로 의사 요소를 사용하여 라이트 패널이 복잡 해지는 것을 방지 할 수 있습니다.
/ * 아이콘의 일반 스타일 * / ...악기 { 위치 : 상대; 색상 : # 666; 배경 : 흰색; 커서 : 포인터; } / * 마우스 오버시 아이콘 스타일 * / .instrument : hover { 배경 : # 666; 색상 : 흰색; } / * 툴팁 스타일 * / .instrument : hover : after { 내용 : attr (데이터 툴팁); 위치 : 절대; 왼쪽 : 100 %; 색상 : # 666; }가상 요소는 마우스 오버시에만 표시되므로 display : block으로 숨길 필요가 없습니다. 위치는 속성에 따라 결정됩니다. 위치 및 왼쪽 / 오른쪽 / 위 / 아래... 속성에서 가져 오려면 데이터 도움말 타겟 CSS 툴팁 콘텐츠 요소는 기능을 제공합니다 attr ()... 간결함을 위해 장식 스타일은 생략했습니다.
스크립트없이 클릭시 나타나는 힌트
이전에 논의 된 툴팁 메커니즘은 대상 요소 위로 마우스를 가져 가면 반응하며 CSS 의사 클래스를 기반으로합니다. : 호버... 경우에 따라 클릭시 도구 설명을 여는 것이 좋습니다. 이 효과는 JavaScript에서 구현하기 쉽지만 CSS가 그 일을 할 수 있습니다.
CSS 의사 클래스 목록 중에는 멋진 클래스가 있습니다. : 초점링크 및 입력 요소에 사용할 수 있습니다. 같지 않은 : 호버커서가 떠나 자마자 사라집니다.마우스,이 가상 클래스를 사용하면 대상 요소의 활성 상태를 유지할 수 있습니다. 그리고 입력 필드가 의미 상 툴팁을 만드는 데 적합하지 않은 경우 링크는 괜찮습니다.
첫 번째 예제의 목록 항목을 링크로 대체 해 보겠습니다.
<a class = "star"href = "javascript :무효 (0) "> 프록시마 센타 우리 <div class = "tooltip"> <img src = "/ images / proxima.jpg"> Proxima Centauri (Latin proxima-가장 가까운)는 태양 다음으로 지구에서 가장 가까운 별인 Alpha Centauri에 속하는 적색 왜성입니다. </ div> </a>
속성 href 의미와 함께 자바 스크립트 : 무효 (0) 링크 클릭에 대한 브라우저 반응을 방지하기 위해 필요합니다.
다음 스타일을 사용하면 클릭시 별에 대한 설명이 포함 된 툴팁을 호출 할 수 있습니다.
.star .tooltip { 디스플레이 : 없음; } .star : focus .tooltip { 디스플레이 : 블록; }링크는 사용자가 페이지의 아무 곳이나 클릭 할 때까지 포커스를 유지합니다.
따라서 웹 사이트의 툴팁은 JavaScript를 사용하지 않고도 다양한 방법으로 만들 수 있습니다. 그들 각각은 좋으며 특정 상황에 가장 적합한 것을 선택하면됩니다.
