jquery 툴팁 예제

팁: 브라우저가 도구 설명의 위치를 결정할 수 있도록 “자동” 값을 사용하여 데이터 배치 특성을 사용할 수도 있습니다. 예를 들어 값이 “자동 왼쪽”인 경우 도구 설명은 가능하면 왼쪽에 표시되며, 그렇지 않으면 오른쪽에 표시됩니다. 기본적으로 브라우저에는 제목 특성 값을 표시하는 도구 설명이 있으며 jQuery UI 도구 설명은 기본 도구 설명의 대체 도구이며 title 특성값을 얻고 필요한 태그를 자동으로 추가합니다. 툴팁을 지정한 콘텐츠 옵션으로 초기화: 기본적으로 도구 설명이 요소 위에 표시됩니다. 도구 설명의 인스턴스 개체를 검색합니다. 요소에 연결된 인스턴스가 없는 경우 정의되지 않은 인스턴스가 반환됩니다. 데이터 배치 특성을 사용하여 요소의 위, 아래쪽, 왼쪽 또는 오른쪽에 도구 설명의 위치를 설정합니다. 따라서 도구를 표시하고 숨길 시기를 결정하기 위해 이벤트를 수신중지해야 하므로 비활성화된 요소에 대한 도구 설명팁을 제대로 제어할 수 없습니다. 따라서 jQuery UI는 비활성화된 요소에 연결된 도구 설명에 대한 지원 수준을 보장하지 않습니다. 안타깝게도 비활성화된 요소에 대한 도구 설명이 필요한 경우 기본 도구 설명과 jQuery UI 도구 설명이 혼합될 수 있습니다. Tooltip은 기본 도구 설명팁을 대체하여 테마로 만들뿐만 아니라 다양한 사용자 지정을 허용합니다: 제목 특성이 있는 모든 요소에 이벤트 위임을 사용하여 문서에 도구 설명 만들기.

아래 데모에서 마우스 포인터가 링크 위로 마우스를 가져가면 미리 정의된 ARIA가 HTML 태그에 추가됩니다. 위젯은 도구 설명에 대한 태그를 동적으로 생성하고 문서에 부가합니다. 도구 팁클래스 옵션은 ui-tooltip 속성을 사용하여 클래스 옵션에 더 이상 사용되지 않습니다. 참고: 도구 설명은 jQuery로 초기화해야 합니다: 지정된 요소를 선택하고 tooltip() 메서드를 호출합니다. 도구 설명이 표시되어야 하는 항목을 나타내는 선택기입니다. 도구 설명 콘텐츠의 제목 특성 이외의 것을 사용하거나 이벤트 위임에 다른 선택자가 필요한 경우 사용자 지정합니다. 초기화 후 ui-tooltip 클래스에 대한 테마를 읽고 변경한 클래스 옵션의 속성을 가져옵니다. 주: 객체가 값으로 있는 옵션의 경우 점 표기법의 경우 특정 키값을 얻을 수 있습니다. 예를 들어 “foo.bar”는 foo 옵션에서 막대 속성의 값을 얻습니다. Jquery UI는 날짜 선택기, 탭, 시간 선택기, 색상 선택기 등과 같은 GUI 위젯의 많은 모음입니다.

또한 Jquery UI는 특정 요소에 마우스를 가져가면 텍스트를 설정하고 표시할 수 있는 도구 설명 GUI 위젯을 제공합니다. 팁: 플러그인은 개별적으로(부트스트랩의 개별 “tooltip.js” 파일 사용) 또는 한 번에 모두 포함할 수 있습니다(“bootstrap.js” 또는 “bootstrap.min.js”사용). 이러한 옵션을 구성하려면 도구 설명() 위젯 메서드 내에서 개체 리터럴 또는 개체 참조를 전달할 수 있습니다. 문자열 – 도구 팁 내용에 사용할 HTML의 문자열. 위의 예에서 첫 번째 상자의 도구 설명 내용은 콘텐츠 옵션을 사용하여 설정됩니다. 도구 설명이 마우스를 따르는 것을 확인할 수도 있습니다. 두 번째 입력 상자에 대한 도구 설명이 비활성화되었습니다.

This entry was posted in Uncategorized. Bookmark the permalink.