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

홈페이지: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 코드:

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

2.

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 코드: 코드 복사

코드는 다음과 같습니다.