マウスオーバーで吹き出しを表示「niceTooltip」
当ページのリンクには広告が含まれています。
スポンサーリンク
マウスオーバーで吹き出し（ツールチップ）を表示するプラグイン「niceTooltip」を紹介します。
jQueryプラグイン「niceTooltip」
このプラグインを使えば、指定した要素にツールチップを追加することができます。
ツールチップにはお好みのテキストを指定でき、表示する位置（例えば、右上）もカスタマイズすることができます。
デザインもシンプルなので、どのようなサイトにもおすすめです。
スポンサーリンク
それではデモページの「ここ」というところにマウスをもっていってみてください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Collapserのデモでーす。">
<title>Collapser - jQueryプラグイン</title>
</head>
<body>
<h1>Collapser のデモでーす。</h1>
<p id="demo1">ここ</p>
<p id="demo2">ここ</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="nicetooltip.js"></script>
<script>
$(function(){
$('#demo1').niceTooltip({
HTML: "つーるちっぷ"
});
$('#demo2').niceTooltip({
HTML: "位置を右下に指定したつーるちっぷ",
position: {
horizontal: "right",
vertical: "bottom"
}
});
});
</script>
</body>
</html>
スポンサーリンク