対応ブラウザも多く、カスタマイズもしやすいjQueryのToolTip “qTip”。

aのタイトルタグを表示させたり、個別に任意のテキストを表示でき、CSSも設定できるのでカスタマイズも楽にできます。対応ブラウザもIE6+。

qTipダウンロード

 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.qtip-1.0.0-rc3.min.js" type="text/JavaScript"></script>
<script type="text/javascript">
$(document).ready(function() {
//aタグのtitleを表示
$('a[title],form .foo[title]').qtip({
style: { 
width: 200,
padding: 5,
background: '#000',
color: 'white',
textAlign: 'center',
fontSize:'10px',
border: {
width: 7,
radius: 5,
color: '#ccc000'
},
tip: 'topLeft',
}
});
//style "qtip_sample"の設定
$.fn.qtip.styles.qtip_sample = {
background  : '#132531',
color       : '#FFFFFF',
textAlign   : 'left',
border      : {
width   : 2,
radius  : 4,
color   : '#C1CFDD'
},
width       : 220
}
// クラス'bar'のratingを参照、設定
$( '.bar' ).each( function( ) {
var rating = $( this ).attr( 'rating' );
// ratingの値を判定
if ( rating == undefined || rating == '' ) {
rating = 'I have not yet been rated.'; //空の場合
}
else {
rating = 'The rating for this is ' + rating + '%'; //空でない場合
}
// qtipの設定
$( this ).qtip( {
content     : rating,
position    : {
target  : 'mouse'
},
style       : 'qtip_sample'
} );
} );
});
</script>
</head>
<body>
<ul>
<li class="bar" rating="73">bar AAA</li>
<li class="bar" rating="66">bar BBB</li>
<li class="bar" rating="">bar CCC</li>
<li class="bar">bar DDD</li>
</ul>
<ul>
<li><a href="#" title="TITLE AAA">AAA</a></li>
<li><a href="#" title="TITLE BBB">BBB</a></li>
<li><a href="#" title="TITLE CCC">CCC</a></li>
<li><a href="#" title="TITLE DDD">DDD</a></li>
</ul>
<form>
<label title="Here's a label" for="TextBox">Textbox Label:</label> <input name="TextBox" type="text" class="foo" id="TextBox" title="And here's an input box!" />
</form>
</body>
</html>
    
参考サイト
How to use jQuery qTip – Simple Example please – Stack Overflow
プラグインサイト
qTip
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

twelve + 9 =