Bootstrap tooltip on Filestyle input element
Is there a way to bind Bootstrap Tooltip to Filestyle input element? Something to look like this when it hangs:
I have tried the following with no 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 the JSFiddle session .
source to share
I got it for a small version button
by following these steps.
First apply the class to your input filestyle
:
<input type="file" class="filestyle apply-tooltip" data-input="false" data-buttontext="" data-iconname="glyphicon-paperclip"/>
Pay attention to the class .apply_tooltip
? Then we iterate over the elements of this class and assign a couple of attributes to their sibling elements <div>
(which are generated filestyle
):
$('.apply-tooltip').each(function(){
$(this).siblings("div").attr("data-toggle", "tooltip");
$(this).siblings("div").attr("title", "Attach File");
});
Finally, call the function $([data-toggle="tooltip"]).tooltip()
as usual. This will activate tooltip
in the generated <div class="bootstrap-filestyle input-group">
.
The reason you need to do this is because it filestyle
hides all the elements that are used to create custom input fields. Because of this, it was tooltip
activated correctly, but on a hidden element.
Here's a modified version of your JSFiddle to demonstrate this in practice:
http://jsfiddle.net/admvx689/1/
I'll see if I can get the rest to work. Hope this helps now!
Edit
It actually works for large inputs too, you just need to hover over the right section (button on the right)
source to share