How to add tooltip on input field by using zurb foundation - zurb-foundation

Question

I want to add a tooltip at bottom of input area.
So I wrote like this.
<div class="row collapse">
<div class="small-9 columns">
<span data-tooltip class="has-tip" title="Tooltip">
<input type="text" placeholder="name">
</span>
</div>
<div class="small-3 columns">
Action
</div>
</div>
But tooltip is appeared not at bottom of input field, but over the field.
How can I show tooltip bottom of input area correctly?

Answer 1

Try
<div class="row collapse">
<div class="small-9 columns">
<input type="text" placeholder="name" data-tooltip class="has-tip" title="Tooltip">
</div>
<div class="small-3 columns">
Action
</div>
</div>
Or you could place the tip in the <div class="small-9 columns">

Answer 2

This java-script gives the same effect as foundation5 tooltip, but for form elments without using the tooltip plugin.
HTML Code:
<input type="text" placeholder="name" data-tooltip title="This is the tip" />
Javascript:
inputToolTip: function() {
var _fadeSpeed = 400;
$("input[data-tooltip],textarea[data-tooltip]").each(function(k, input) {
var $input = $(input);
var _tiptext = $input.attr('title');
console.log($input);
var $tip = $('<div class="tip-place"><span class="tooltip tip-bottom tip-me">' +
_tiptext + '<span class="nub"></span></span></div>').hide();
$input.after($tip);
$input.focus(function() {
$tip.fadeIn(_fadeSpeed);
$input.attr('title','');
}).blur(function() {
$input.attr('title',_tiptext);
$tip.fadeOut(_fadeSpeed);
});
$input.removeAttr('data-tooltip');
})
};
inputToolTip(); // You will need to call this again, after adding a form via ajax, etc.
And finally some CSS Code
.tooltip.tip-me {
left: 1em
display: block
top: -1em
position: relative
}
.tip-place {
height: 0
}