前々から、バルーンヘルプ（吹き出し）みたいな事がしたくて、いろいろ探してサンプルをダウンロードし、試してみたんだけど、右メニューのアコーディオンメニューが動作しなくてなってしまう事情があり、保留にしていた。で、今日、仕事が一つ落ち着いたのでAdobe Spryのサンプルを見てたんだけど、その中に「Tooltip」ってのがあって、なんだコレ？と覗いてみたら、ズバリ「吹き出し」のサンプルだった。早速、サンプルのhtmlソースを見て、まずは何が必要かチェック。

「SpryTooltip.js」をコピーし「おでのiTunes」のトップページのテスト用htmlに追加インクルド。おでの場合、XMLを読み込んでリピート表示しているため、ちょっとややこしい。

<div spry:detailregion="dsCities" class="SpryHiddenRegion" id="tooltip">
	No.{catalog}<br />
	{album} / {artist}
</div>

• spry:detailregion="dsCities"は、XMLファイルを読み込む変数名。
• classで「SpryHiddenRegion」をあてているのは、ページを読み込んだ時に一瞬、吹き出しの内容が見えてしまうため、このclassにより非表示にしている。
• id="tooltip" これは絶対必要。

で、divタグの中に吹き出しの内容を記述。 {catalog}や、{album} / {artist}は、おでのXMLの都合でこうなっている。 こうする事で、カタログ番号＆アルバム名＆アーティスト名に置き換わる。

そして、上に書いたdivタグの直下に

<script type="text/javascript">

Spry.Data.Region.addObserver('SpryBox',{onPostUpdate:function(){var tt1 = new Spry.Widget.Tooltip('tooltip','.trigger');}});

</script>

を記述。

• 'SpryBox' は、親要素のID名


• 'tooltip' は、さっき書いたdivタグのID名


• 'trigger' は、吹き出し表示する際のマウスオーバーするとこのClass名

「class="trigger"」を吹き出しさせたい所に記述。さらに「onmouseover="dsCities.setCurrentRow('{ds_RowID}');"」併せて記述。
dsCitiesはさっき書いたとおりの意味。

後は、CSS

.iframeTooltip{position:absolute; z-index:1010; filter:alpha(opacity:0.1);}

は必須。
#tooltipに、好みに合わせて吹き出しの色とかを指定。おでの場合は、

#tooltip{border:1px solid #222; padding:1em; background:url(../img/bg_extended_bt.png) no-repeat right top #000;}

…
あくまでメモ書きです。おでがわかればいいという事で、ご容赦ください。