qTip JQuery 기반 툴팁 플러그인 [호환성]

qTip JQuery 기반 툴팁 플러그인 [호환성]_jquery

WBOY

풀어 주다： 2016-05-16 18:20:40

원래의

1121명이 탐색했습니다.

홈페이지:http://craigsworks.com/projects/qtip/

다운로드:http://craigsworks.com/projects/qtip/download

예:http://craigsworks.com/projects/qtip/

qTip은 JQuery 기반 도구 설명 플러그인입니다. 거의 모든 주요 브라우저를 지원합니다
예:

Internet Explorer 6.0
Firefox 2.0
Opera 9.0
Safari 3.0
Google Chrome 1.0
Konqueror 3.5

qTip을 사용하면 팁의 위치와 스타일을 쉽게 정의할 수 있습니다. 동시에 qTip에는 강력한 API도 있습니다...

qTip을 사용하기 전에 JS 파일 두 개만 가져오면 됩니다. :

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

다음은 몇 가지 간단한 예입니다.

1. 기본 텍스트

html은 다음과 같습니다.

코드 복사

기본 텍스트

JS 코드:

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

html은 다음과 같습니다. 표시:

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

제목 속성

🎜>
JS 코드:

코드 복사

코드는 다음과 같습니다. < ;script type="text/javascript"> $(document).ready(function() {

$('#content a[href][title]').qtip({

콘텐츠: { 
텍스트: false 
}, 
스타일: '크림' 
}) 
 
3. qTip JQuery 기반 툴팁 플러그인 [호환성]_jquery 

html 아래와 같습니다. 

코드 복사

코드는 다음과 같습니다. 🎜>

qTip JQuery 기반 툴팁 플러그인 [호환성]_jquery

🎜>JS 코드:

코드 복사

코드는 다음과 같습니다.

$(document).ready(function ()
{

$('#content a[href]').qtip({ content: '< ;img src="small.png" alt="qTip JQuery 기반 툴팁 플러그인 [호환성]_jquery" />' }) }) 4. value

html은 다음과 같습니다. 

코드 복사

 코드는 다음과 같습니다.

모서리 값 🎜>

JS 코드: 코드 복사

코드는 다음과 같습니다. :

html은 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다:

JS 코드:

코드 복사

코드는 다음과 같습니다. {

$('#content img').each(function()

{
$(this).qtip(
{
content: '편집 | 삭제',
위치: 'topRight',
숨기기: {
고정: true
},
style : {
padding: '5px 15px',
name: '크림'
}
})
}); 🎜>

css 코드:

코드 복사

padding: 1px; }

 
html 로딩은 다음과 같습니다. : 

HTML 코드

코드 복사

코드는 다음과 같습니다.

나를 클릭하세요

JS 코드:

코드 복사

코드는 다음과 같습니다.

버튼: '닫기'

} 
}, 
위치: { 
코너: { 
대상: 'bottomMiddle ', 
tooltip: 'topMiddle' 
}, 
adjust: { 
screen: true 
} 
}, 
show: { 
when: 'click' , 
solo: true 
}, 
hide: 'unfocus', 
style: { 
tip: true, 
border: { 
width: 0, 
 반경: 4 
}, 
이름: 'light' , 
너비: 570 
} 
}) 
}) 
 script> 

 
7. 모달 툴팁 

html은 다음과 같습니다. 

HTML 코드



복사 코드


 코드는 다음과 같습니다.
 

여기를 클릭하세요

JS 코드: 코드 복사

코드는 다음과 같습니다.