Latest web development tutorials

jQuery를 UI API - 도구 설명 상자 부재 (툴팁 위젯)

범주

위젯 (위젯)

용법

설명 : 사용자 정의, themable 도구 설명 상자, 기본 도구 설명 상자를 교체합니다.

새로운 버전 : 1.9

그들이 테마 수 있도록 도구 설명 상자 (툴팁)이, 기본 도구 설명 상자를 교체, 다양한 사용자 정의 할 수 있습니다 :

  • 아약스에 의해 각주 또는 인라인 추가 콘텐츠를 검색하는 것처럼 아닌 다른 콘텐츠의 제목을 표시합니다.
  • 요소의 도구 설명 상자를 중심으로 예를 들어 사용자 정의 타겟팅.
  • 경고 또는 오류 영역의 모양을 사용자 정의하기 위해 추가 스타일을 추가합니다.

기본 그라데이션 애니메이션이 보여 더 영적 같은 모양의 가시성을 전환 간단한에 비해 숨기기 도구 설명 상자입니다. 이 수 show 및 hide 사용자 지정 옵션을.

items 및 content 옵션은 속도를 유지해야합니다. 당신이 하나를 변경하면 다른 변경해야합니다.

일반적으로, 장애인 요소는 DOM 이벤트를 트리거하지 않습니다. 우리가 때 표시 및 숨기기 도구 설명 상자를 결정하기 위해 이벤트를 수신해야하기 때문에 따라서, 풍선 사용할 요소를 제어 할 수있는 적절한 도구는 할 수 없습니다. 이것은 어떤 레벨에서 공구 팁 상자에 부착 된 비활성 요소에 대한 지원을 보장 할 수 jQuery를 UI로 이끈다. 이것은 당신이 장애인 요소에 대해 확인 메시지를 표시해야하는 경우, 당신은 기본 및 jQuery를 UI 풍선 툴팁 상자의 혼합물을 사용해야 할 수도 있다는 것을 의미한다.

테마

사용 도구 설명 상자 부재 (툴팁 위젯) jQuery를 UI CSS 프레임 워크를 그 스타일의 모양과 느낌을 정의 할 수 있습니다. 당신이 지정된 툴팁 스타일 상자를 사용해야하는 경우, 다음과 같은 CSS 클래스 이름을 사용할 수 있습니다 :

  • ui-tooltip 도구 설명 상자 외부 용기 :.
    • ui-tooltip-content : 도구 설명 상자 내용.

의존

추가 정보

  • 부분은 그렇지 않으면 작동하지 않습니다, 일부 기능 CSS가 필요합니다. 맞춤 테마를 작성하는 경우, 시작점으로 지정된 위젯 CSS 파일을 사용한다.

예

문서에 도구 설명 상자 (도구 설명)을 작성, 이벤트 브로커의 제목 속성으로 모든 요소를 ​​사용합니다. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> 툴팁 상자 부재 (툴팁 위젯) 데모 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
 
<P>
  <a href="#" title="锚描述"> 앵커 텍스트 </a>에
  <입력 제목 = "입력 도움말">
</ P>
<스크립트>
  $ (문서) .tooltip ();
</ 스크립트>
 
</ BODY>
</ HTML>