【jQuery】ツールチップを表示させる ～ tipsy の使用　～

jQuery

前準備

 [1] 以下のサイトから、tipsy の javascript と CSS をダウンロードする
  1-1) jquery.tipsy.js
  1-2) tipsy.css
https://github.com/jaz303/tipsy
 [2] jQuery と 1)でダウンロードしたファイルをインポートする

サンプル

<html>
<head>
<meta http-equiv="Content-type"content="text/html; charset=UTF-8"></meta>
<link rel="stylesheet" type="text/css" href="tipsy.css" />
<script src="">https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
<script type="text/javascript" src="jquery.tipsy.js"></script>
<script type="text/javascript"charset="UTF-8">
$(function() {
  $("#sampleTootip").tipsy({
    gravity: 'w', // n,s,w or e（北方向 南方向 東方向 西方向）
    fade: true, // フェードさせるか
    fallback: "表示された？" // titleではなくscript側で指定したい場合
  });
});
</script>
</head>
<body>
<span id="sampleTootip">Come here!</span>
</body>
</html>

参考文献

http://www.skuare.net/2009/12/facebookjavascripttipsy.html
http://shimz.me/blog/jquery/2693
http://qiita.com/shmurakami/items/11139060cbd15604e1aa
http://www.skuare.net/test/jtipsy.html
http://phpjavascriptroom.com/example3.php?f=module/include/ajax/jquery_plugin_tooltip/tipsy.inc&ttl=tipsy%E3%81%AE%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB