Bootstrap Tooltip on Filestyle input element

Question

Is there a way to attach a Bootstrap Tooltip to a Filestyle input element? Something that would appear like this when hovered over:

I've tried the following without success:

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

Here is a link to a JSFiddle session.

Answer 1

I got it to work for the small button version by doing the following.

First, apply a class to your filestyle input:

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

Notice the .apply_tooltip class? Next, loop over elements of that class and assign a couple attributes to their sibling <div> elements (which are generated by filestyle):

$('.apply-tooltip').each(function(){
    $(this).siblings("div").attr("data-toggle", "tooltip");
    $(this).siblings("div").attr("title", "Attach File");
}); 

Lastly, call your $([data-toggle="tooltip"]).tooltip() function as you normally would. This will activate the tooltip on the generated <div class="bootstrap-filestyle input-group">.

The reason you need to do this is that filestyle hides any elements that is uses to generate the custom input fields. Because of this, the tooltip was being activated correctly, but on a hidden element.

Here is a modified version of your JSFiddle showing this in practice:

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

I'll see if I can get the other two working as well. Hope that helps for now though!

Edit

It actually works for the larger inputs too, you just have to hover over the right section (the button on the right)

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