GLT - Good-Looking Tooltips でtitle属性以外でツールチップを作成する方法

GLT - Good-Looking Tooltipsとは下記の記事に書かれているjavascriptのライブラリになります。

GLT - Good-Looking Tooltips を使用してみました。 - @camelmasaの開発日記

ツールチップを作成するのに便利なライブラリですが、標準のソースコードでは出力されるhtml内のtitle属性全てが対象になってしまいます。
つまり意図しない部分で、ツールチップが動作してしまう可能性があります。

解決方法

glt.jsのソースを修正します。
GLT - Good-Looking Tolltips

//34行目
this.elementsWithTitles = getElementsByAttribute(document, "*", "title");

//99行目
this.currentTitle = this.currentElm.getAttribute("title");

//100行目
this.currentElm.setAttribute("title", "");

/143行目
this.currentElm.setAttribute("title", this.currentTitle);

上記の部分を下記に変更します。(例として"glt"プロパティとします)

//34行目
this.elementsWithTitles = getElementsByAttribute(document, "*", "glt");

//99行目
this.currentTitle = this.currentElm.getAttribute("glt");

//100行目
this.currentElm.setAttribute("glt", "");

/143行目
this.currentElm.setAttribute("glt", this.currentTitle);

そしてhtml側では下記のように指定します。

<div glt="ぺろっとね！">テスト</div>

まとめ

これで意図しないGLTの動きを防ぐ事が出来ました。

補足

vimで作業している方は、下記のコマンドで一発です。

:%s;"title";"glt";g

[PR]Spreeの情報を集めています。

ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。
このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。
http://spreecommerce.jp/