twitter-bootstrap - Filestyle 输入元素上的引导工具提示

Question

有没有办法将引导工具提示附加到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()像往常一样调用你的函数。这将激活tooltip生成的<div class="bootstrap-filestyle input-group">.

您需要这样做的原因是filestyle隐藏了用于生成自定义输入字段的任何元素。因此，tooltip被正确激活，但在隐藏元素上。

这是您的 JSFiddle 的修改版本，在实践中显示了这一点：

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

我会看看我是否可以让其他两个也正常工作。希望现在有所帮助！

编辑

它实际上也适用于较大的输入，您只需将鼠标悬停在右侧部分（右侧的按钮）

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