Bootstrap TooltipをFilestyle入力要素にアタッチする方法はありますか? ホバーすると次のように表示されます。
私は成功せずに次のことを試しました：
<input data-toggle="tooltip" title="Attach file" type="file" class="filestyle" data-input="false" data-buttontext="" data-iconname="glyphicon-paperclip">
JSFiddle セッションへのリンクは次のとおりです。
次のようにして、小さなbuttonバージョンで動作するようにしました。
まず、filestyle入力にクラスを適用します。
<input type="file" class="filestyle apply-tooltip" data-input="false" data-buttontext="" data-iconname="glyphicon-paperclip"/>
.apply_tooltipクラスに注目？次に、そのクラスの要素をループし、いくつかの属性を兄弟<div>要素 ( によって生成されるfilestyle)に割り当てます。
$('.apply-tooltip').each(function(){
$(this).siblings("div").attr("data-toggle", "tooltip");
$(this).siblings("div").attr("title", "Attach File");
});
最後に、$([data-toggle="tooltip"]).tooltip()通常どおり関数を呼び出します。tooltipこれにより、生成された でがアクティブになります<div class="bootstrap-filestyle input-group">。
これを行う必要があるfilestyleのは、カスタム入力フィールドの生成に使用される要素を非表示にするためです。このため、tooltipは正しくアクティブ化されていましたが、非表示の要素でした。
実際にこれを示す JSFiddle の修正版を次に示します。
http://jsfiddle.net/admvx689/1/
他の2つも同様に機能するかどうかを確認します。それが今のところ役立つことを願っています！
編集
実際には、より大きな入力でも機能します。右側のセクション (右側のボタン) にカーソルを合わせるだけです。