めずらしくちょっとjavascriptの話。

mootoolsでもjQueryでも独自スクリプトでもどれでもいいんだけど、あの所謂ツールチップ的なことをjavascriptで実現していると、title属性を取られてしまって、それ以外のスクリプトが困ることがある。

なんで連中はtitle属性を勝手に消しちゃうのかというと、title属性があるとブラウザ側が自分達でツールチップ作っちゃうから、そうするとこっちがjavascriptで生成したのと2重に表示されちゃうんだよね。だからわざと消すわけです。「title属性はございません（へへっ」みたいな顔しておいて「そうか、titleないならツールチップ意味ないわー、作らんとくわー」ってなったとこで、ぶんどっといたtitle属性のデータをササッと表示するってのがjavascript式ツールチップの戦法です。

なので、多分独自ツールチップを実現させる上で、HTML上のtitle属性を奪ってしまうのは仕方がないわけです。

でもツールチップ以外にだってtitle属性見たいことあるよね。動的生成したフォトライブラリとか、あと、なんだろ、とにかくtitle属性を覗きたいことは出てくるだろう。しかも場合によっては後から時にはhover中に。

で、考えたのだが、ツールチップがtitle属性を奪うときに、そのかわりdata-titleみたいな属性を作ってそこにtitle属性の内容を書いておいてあげる。これで万事解決。data-*ってのはHTML5から加わった属性で、data-の後に好きな文字列をつなげて独自の属性を作ることができる。頭にdata-が付いてればHTML5で定義されてない属性名であってもvalidになるのです。別にjavascriptが動的に生成するHTMLでvalidも何もという気もしないでもないですが、ありもしない属性をねつ造するよりは精神的に。

つまり、例えば、

<a href="http://wolfrosch.com" title="おいらのサイト">ヴォルフロッシュ</a>

っていうのを

<a href="http://wolfrosch.com" data-title="おいらのサイト">ヴォルフロッシュ</a>

に書き換える。

まぁこの作業はツールチップスクリプトがtitle属性奪うときに同時にやれば良いでしょう。

こうした上で、ツールチップスクリプト以外のスクリプトがtitleを見たいときにはtitle属性じゃなくてdata-titleの方にアクセスしてもらう。これならtitle属性ではないからブラウザもツールチップ出さないし。他にもjavascript内でデータを保持する方法はありそうだけど、titleからdata-titleに移すだけなら既存のスクリプトをほんのちょっと変えればいいだけだし。

さらに言うと、data-titleじゃなくてdata-(独自prefix)-titleだと他と被る心配なくてさらにシャレてるかな。私はdata-wf-titleって名前付けて使ってる。自分で作ったdata-*属性は全部data-wf−*。

data-*属性はイイ奴だ。