Yahoo! UI で遊ぶ

マウスカーソルをテキストの上に持ってくると、ポップアップでテキストが出てくるような機能が簡単に使えないものかとしばらく模索してみたところ、Yahoo! UI Tooltipが便利そう。

YUIを落としてきて、HTML ヘッダに以下の内容を書き込む。Yahoo のサイトが遅いのでローカルでやった方がいいかも。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/container/assets/container.css"> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/animation/animation-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/container/container-min.js"></script> 

で、HTML 本文はこれだけ。 title 属性で popup の内容を表示させる文字に付与する。

<script type="text/javascript">
<!--
var tooltip = new YAHOO.widget.Tooltip("tt");
tooltip.cfg.setProperty("context", "tooltip");
// -->
</script>

<p id="tooltip" title="hogehoge">hello</b>

Hiki 用 popup plugin も用意してみたけど、どうも反応が遅い。showdelay 属性を変更してみるか。
color で指定した色に text を変更し、 comment を popup で付与する。

ただ、外部javascriptファイルを読み込む必要があるので、hiki の header を書き換える必要あり。

hiki/plugin/00default.rb

あたりかな。

#popup.rb
def popup(text, comment, color)
        <<-EOS
                <script type="text/javascript">
                <!--
                var tooltip = new YAHOO.widget.Tooltip("tt");
                tooltip.cfg.setProperty("context", "tooltip");
                // -->
                </script>
                <font id="tooltip" title="#{comment}" color="#{color}" >#{text}</font>
        EOS
end