Bootstrap Tooltip on Filestyle輸入元素

Question

有沒有辦法將引導Tooltip附加到Filestyle輸入元素？東西時，鼠標懸停，將出現這樣的：

我已經嘗試沒有成功如下：

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

這裏是一個JSFiddle session的鏈接。

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/