grailsとtipsyでふきだしのツールチップを表示する

grailsとtipsyでふきだしのツールチップを表示するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言

modules = {
    application {
        resource url:'js/application.js'
    }
    // tipsyのモジュールを宣言
    tipsy {
        dependsOn 'jquery'
        resource url: 'js/jquery.tipsy.js'
        resource url: 'css/tipsy.css'
    }
}

jquery.tipsy.jsはweb-app/jsに、tipsy.cssはweb-app/cssに配置します。

2. main.gspに以下のようにr:requireを使用してリソースを導入します。

  <g:layoutHead/>
<!-- tipsyを使用 -->
<r:require module="tipsy"/>
        <r:layoutResources />
 </head>

3. viewに以下のようなコードを追加します。

<!-- tipsyでツールチップを表示する -->
<p>
  <a id="hoveronme" href='#' title='ありがとう'>マウスをのせてね</a>
</p>
<script type="text/javascript">
  $(function(){
    $("#hoveronme").tipsy();
  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
tipsyのホームページ
http://onehackoranother.com/projects/jquery/tipsy/

tipsyのgithub
https://github.com/jaz303/tipsy