jquery 툴팁 예제

jQueryUI는 도구 설명() 메서드를 제공하여 도구 설명을 표시하려는 모든 요소에 도구 설명을 추가합니다. 이렇게 하면 기본적으로 페이드 애니메이션을 제공하여 가시성을 전환하는 것과 비교하여 도구 팁을 표시하고 숨길 수 있습니다. 아래 데모에서 마우스 포인터가 링크 위로 마우스를 가져가면 미리 정의된 ARIA가 HTML 태그에 추가됩니다. 위젯은 도구 설명에 대한 태그를 동적으로 생성하고 문서에 부가합니다. HTML을 사용하여 자체 도구 설명서를 생성할 수 있으므로 도구 설명의 사용자 지정과 유연성이 증가합니다. jQuery UI 도구 설명 위젯의 구성은 웹 페이지 내의 모든 도구 설명에 적용됩니다. 따라서 문제는 특정 요소에만 구성을 적용하는 것입니다. 도구 설명이 표시되어야 하는 항목을 나타내는 선택기입니다. 도구 설명 콘텐츠의 제목 특성 이외의 것을 사용하거나 이벤트 위임에 다른 선택자가 필요한 경우 사용자 지정합니다. 참고: 도구 설명은 jQuery로 초기화해야 합니다: 지정된 요소를 선택하고 tooltip() 메서드를 호출합니다. 제목 특성을 사용하여 도구 설명 안에 표시할 텍스트를 지정합니다: 초기화 후 ui-tooltip 클래스에 대한 테마를 읽고 변경한 후 클래스 옵션의 속성을 가져옵니다.

때때로 번거로길 수 있는 도구 설명. 그러나 이 에 대한 방법도 있습니다. jQuery UI 도구 설명 위젯에는 미리 빌드된 스타일이 제공되지만 사용자는 기본/기존 스타일을 재정의할 수 있습니다. jQuery UI 도구 설명 위젯은 마우스 커서의 움직임을 추적하고 마우스 포인터가 웹 페이지의 지정된 섹션 내에 있는 경우에만 도구 설명을 표시하도록 만들 수 있습니다. 일반적으로 비활성화된 요소는 DOM 이벤트를 트리거하지 않습니다. 따라서 도구를 표시하고 숨길 시기를 결정하기 위해 이벤트를 수신중지해야 하므로 비활성화된 요소에 대한 도구 설명팁을 제대로 제어할 수 없습니다. 따라서 jQuery UI는 비활성화된 요소에 연결된 도구 설명에 대한 지원 수준을 보장하지 않습니다. 안타깝게도 비활성화된 요소에 대한 도구 설명이 필요한 경우 기본 도구 설명과 jQuery UI 도구 설명이 혼합될 수 있습니다.

ui-tooltip 클래스에 대한 테마를 변경하여 지정된 클래스 옵션을 사용하여 도구 설명초기화: 팁: 브라우저가 도구 설명의 위치를 결정할 수 있도록 “자동” 값을 가진 데이터 배치 특성을 사용할 수도 있습니다.