Filestyle輸入元素上的Bootstrap Tooltip

Question

有沒有辦法將Bootstrap Tooltip附加到Filestyle輸入元素？ 在盤旋時會出現這樣的東西：

我試過以下但沒有成功：

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

這是JSFiddle會話的鏈接。

Answer 1

我通過執行以下操作讓它為小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()函數。 這將激活生成的<div class="bootstrap-filestyle input-group">上的tooltip 。

您需要這樣做的原因是filestyle隱藏了用於生成自定義輸入字段的所有元素。 因此， tooltip正確激活，但在隱藏元素上。

這是您的JSFiddle的修改版本，在實踐中顯示了這一點：

http://jsfiddle.net/admvx689/1/

我會看看我能不能讓其他兩個工作。 希望現在有所幫助！

編輯

它實際上適用於較大的輸入，你只需要將鼠標懸停在右邊的部分（右邊的按鈕）

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