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 を使用する前に、2 つの JS ファイルをインポートするだけです。 :

コードをコピー コードは次のとおりです:

簡単な例をいくつか示します。

1. 基本テキスト

html は次のとおりです。

コードをコピー コードは次のとおりです。以下のように:

コードをコピー コードは次のとおりです:

2.

html は次のとおりです。 表示:

コードをコピー コードは次のとおりです:

/a>

🎜>
JS コード:

コードをコピー

コードは次のとおりです: < ;script type="text/javascript"> $(document).ready(function() {

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

コンテンツ: {
テキスト: false
},
スタイル: 'クリーム'
})

3. qTip JQuery ベースのツールチップ プラグイン [優れた互換性]_jquery

html 以下に示すように:

コードをコピー


コードは次のとおりです。 🎜>

コードをコピー

コードは次のとおりです:

$(document).ready(function ()
{
$('#content a[href]').qtip({

content: '' }) }); 4.値

html は次のとおりです:

コードをコピー


コードは次のとおりです:

コーナー値 🎜>

JS コード:

コードをコピー

コードは次のとおりです:

5. 修正されたツールチップ

コードをコピーします

コードは次のとおりです。

JS コード:

コードをコピーします

コードは次のとおりです。 $(document).ready(function( ) { $('#content img').each(function()

{

$(this).qtip(
{
content: '/a> 削除'、
位置: 'topRight'、
固定: true
},
スタイル : {
パディング: '5px 15px',
名前: 'クリーム'
}
}); 🎜>


CSS コード:





コードをコピーします

html の読み込みは次のとおりです。 :

HTML コード




コードをコピー


コードは次のとおりです:

クリックしてください

JS コード:

コードをコピー

コードは次のとおりです:

$('#content a[rel]').each(function()
{
$(this).qtip(
{

content: { url: $(this).attr('rel'), title: { text : 'Wiki - ' $(this).text(), button: '閉じる' } },

position: {

corner: {
target: 'bottomMiddle ',
ツールチップ: 'topMiddle'
},
adjust: {
screen: true
}
},
show: {
when: 'click' 、
solo: true
}、
hide : 'unfocus'、
style: {
tip: true、
border: {
width: 0、
半径: 4
},
名前: 'light' ,
幅: 570
}
})
});/ script>


7. モーダルツールチップ

HTML コード




コピーcode


コードは次のとおりです:

ここをクリック

JS コード:

コードをコピー コードは次のとおりです: