3

Bootstrap TooltipをFilestyle入力要素にアタッチする方法はありますか? ホバーすると次のように表示されます。

ツールチップ付きのファイルスタイル

私は成功せずに次のことを試しました：

<input data-toggle="tooltip" title="Attach file" type="file" class="filestyle" data-input="false" data-buttontext="" data-iconname="glyphicon-paperclip">

JSFiddle セッションへのリンクは次のとおりです。

4

1 に答える 1

2

次のようにして、小さな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つも同様に機能するかどうかを確認します。それが今のところ役立つことを願っています！

編集

実際には、より大きな入力でも機能します。右側のセクション (右側のボタン) にカーソルを合わせるだけです。

http://jsfiddle.net/admvx689/3/

于 2015-07-02T20:04:12.343 に答える