Bootstrap 文件样式输入元素的工具提示

Question

有没有办法附加 Bootstrap Tooltip to a Filestyle 输入元素？悬停时会出现这样的东西：

我尝试了以下方法但没有成功：

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

这是一个link到一个JSFiddle session。

Answer 1

我通过执行以下操作使其适用于小型 button 版本。

首先，将 class 应用于您的 filestyle 输入：

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

注意到 .apply_tooltip class 了吗？接下来，遍历 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() 函数。这将在生成的 <div class="bootstrap-filestyle input-group">.

上激活 tooltip

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

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

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

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

编辑

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

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

Bootstrap 文件样式输入元素的工具提示

Bootstrap Tooltip on Filestyle input element

twitter-bootstrap

twitter-bootstrap-tooltip

bootstrap-file-upload