jQuery 플러그인 Tooltipster는 아름다운 도구 Tips_jquery를 구현합니다.-JS 튜토리얼-php.cn

jQuery 플러그인 Tooltipster는 아름다운 도구 Tips_jquery를 구현합니다.

WBOY

풀어 주다： 2016-05-16 16:04:47

원래의

1671명이 탐색했습니다.

Tooltipster는 아름다운 도구 설명을 빠르게 생성하는 데 도움이 되는 경량 jQuery 도구 설명 플러그인입니다.

1. Tooltipster를 포함한 jQuery 및 플러그인 파일을 로드합니다

Tooltipster를 다운로드한 후 tooltipster.css 및 jquery.tooltipster.min.js를 CSS 및 JavaScript 디렉터리의 루트로 이동합니다. 그런 다음 jQuery를 로드하고 태그 안에 Tooltipster CSS 및 JavaScript 파일을 포함합니다.

<head> 
... 
 
  <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> 
 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script> 
  <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> 
 
... 
</head>

로그인 후 복사

2. HTML을 설정하세요

Tooltipster가 작동하려면 먼저 도구 설명을 포함하려는 요소에 .tooltip 클래스(또는 사용하려는 카테고리/선택 수단)를 추가해야 합니다. 다음으로, 프롬프트에서 말하고 싶은 내용으로 title 속성을 설정하겠습니다. 다음은 몇 가지 예입니다.
툴팁을 추가할 이미지:

코드 복사 코드는 다음과 같습니다.

이미 수업이 있는 툴팁에 대한 링크 추가:

코드 복사 코드는 다음과 같습니다.

http://calebjacob.com" class="ketchup tooltip" title="내 링크의 툴팁 메시지입니다!">링크

div에 툴팁 추가:

코드 복사 코드는 다음과 같습니다.

3, 툴팁 활성화

마지막으로 해야 할 일은 플러그인을 활성화하는 것입니다. 이렇게 하려면 닫는 태그 바로 앞에 다음 스크립트를 추가하세요(원하는 옵션을 사용하세요. 이 경우에는 .tooltip 클래스를 사용합니다).

요약:

<head> 
  ... 
  <script> 
    $(document).ready(function() { 
      $('.tooltip').tooltipster(); 
    }); 
  </script> 
</head>

로그인 후 복사

1. HTML 태그 콘텐츠를 지원하는 도구 팁

2.경량

3. 유연하고 효율적입니다

4. 간단한 스타일 정의, 100% CSS

5. 3가지 테마 지원

6. 파이어폭스, 크롬, IE7/8/9, 오페라, 사파리 지원

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.