前回。
今回はjQuery UIを使ったツールチップで遊んでみました。
ツールチップというのは、マウスポインタをリンクや画像などの上に乗せると浮き上がってくる文章やオブジェクトのことです。
百聞は一見に如かず、以下のデモにあるリンクにマウスポインタを当ててみてください。
なお、今のところはてなブログで作成したjQuery関連の記事はスマートフォンでは動きません。はてなブログのスマートフォン版のデザインが変更できないためです。そのうち対応を考えます。
マウスオーバーでツールチップを表示
デモ
リンク
コード
Javascript
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$('ツールチップを表示させる元タグ').tooltip();
});
</script>
html
<span title="ツールチップに表示させる文章">リンク</span>
基本はhtmlの標準属性であるtitleを用いています。
jQueryの他にjQuery UIと標準のjQueryテーマを読み込んでおきましょう。
標準のjQueryテーマは以下のCSSが用意されています。クリックでテーマが切り替わるので、確認しながらお好きなテーマを読み込んでみてください。
base black-tie blitzer cupertino dark-hive dot-luv eggplant excite-bike flick hot-sneaks humanity le-frog mint-choc overcast pepper-grinder redmond smoothness south-street start sunny swanky-purse trontastic ui-darkness ui-lightness vader
