Qtip 1.0.0-rc3
http://craigsworks.com/projects/qtip/
リンク上にカーソルを動かしたときにツールチップを表示するjQueryプラグインです。
onMouseOverで適当にテキストを挿入するなり、なんならJavaScriptを使用せずCSSだけでもできたりはします。
またalt属性やtitle属性を指定すれば大概のブラウザはその内容を自動的に表示したりしてくれます。
http://phpspot.org/blog/archives/2008/03/javascriptcss_2.html
まあとりあえずcssとqTipでそれぞれツールチップを書いてみます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript"><!-- //JavaScriptでツールチップ
$(document).ready(function(){
$('#qtip_tooltip').qtip({ //id="qtip_tooltip"に対して
content: 'qTipで吹き出し' //表示する文
,style:{ //スタイル
color:"red"
,background:"lightgreen"
,border:{ //外枠
color:"#000000"
,radius:2
}
,tip: {corner:"leftTop"} //角
}
,show: 'mouseover' //表示、非表示にするタイミング
,hide: 'mouseout'
});
});
--></script>
<style type="text/css"><!-- /* CSSでツールチップ */
/* ツールチップを隠す */
#css_tooltip span#css_tooltip_span {
display:none; padding:2px 3px; margin-left:8px; width:130px;
}
/* マウスオーバーで表示する */
#css_tooltip:hover span#css_tooltip_span{
display:inline; position:absolute;
background:lightgreen;
border:1px solid #000000;
color:red;
text-decoration:none;
}
--></style>
</head>
<body>
<a href="#" id="css_tooltip">
CSSでツールチップ
<span id="css_tooltip_span">CSSで吹き出し</span>
</a>
<br />
<a href="#" id="qtip_tooltip">
qTipでツールチップ
</a>
</body>
</html>
|
実際の動作はこのようになります(マウスオーバーで動作)
CSSでツールチップ CSSで吹き出し
qTipでツールチップ
この程度ならCSSでもqTipでもたいして変わらないですね。
qTipが便利なのは、ポップアップする場所やタイミングといった内容をHTMLに直接書くこと無しに、jQueryのセレクタやイベントを使って書けるということでしょう。
マウスオーバー時だけではなく、クリック時やオンロード時といった好きなタイミングで自由なポップアップを行うことができます。
セレクタもIDさえあればonclickみたいなロジックを書く必要も無く、HTMLからロジックを完全に排除して書くことができるようになります。
PR
トラックバック
トラックバックURL:
