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 件のコメント:
コメントを投稿