2014年10月24日金曜日

bootstrap-selectでsubText指定時のtitle属性について

Bootstrap-selectを導入し、showSubtextオプションをオンにしてみたのですが、できあがったSelect Boxにフォーカスしてみると、ツールチップの表示が変です。

Bootstrap-selectで、subTextはsmallタグで指定されますが、タグごとエスケープされてツールチップに表示されています。要素を調査してみると。。。


1行目のbuttonタグのtitle属性にがっつりsmallタグごと入っています。考慮漏れってやつでしょうか。

bootstrap-select.jsの415行目(下記Code3参照)でbuttonタグのtitle属性をセットしているのですが、title属性と、実際にbuttonに表示されるテキスト(上記Code2の3~6行目)と同じ変数titleからセットしています。そのため、showSubtextオプションがオフのときは問題ないのでしょうが、Subtextを表示する場合はsmallタグが入り込んでツールチップ表示が残念な感じになります。

this.$button.attr('title', htmlEscape(title));
this.$newElement.find('.filter-option').html(title);

本来的には実際にbuttonに表示されるテキストとtitle属性の値は別々に生成されるべきですが、面倒なのでtitle属性からはhtmlタグを取ってからセットするようにしました。

this.$button.attr('title', $('' + title + '').text());
this.$newElement.find('.filter-option').html(title);

いい感じにツールチップが表示されました。

0 件のコメント:

コメントを投稿