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

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 session .

Answer 1

我让它为小 button 工作通过执行以下操作进行版本控制。

首先，为您的 filestyle 应用一个类输入:

<input type="file" class="filestyle apply-tooltip" data-input="false" data-buttontext="" data-iconname="glyphicon-paperclip"/>

注意 .apply_tooltip类(class)？接下来，遍历该类的元素并将几个属性分配给它们的兄弟 <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/