Zurb foundation 如何使用Zurb基金会在输入字段上添加工具提示

我想在输入区域的底部添加一个工具提示。 所以我就这样写

<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">
    <a href="#" class="button prefix">Action</a>
  </div>
</div>

但工具提示不显示在输入字段的底部，而是显示在该字段的上方。 如何正确显示输入区域底部的工具提示？

试试看

<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">
    <a href="#" class="button prefix">Action</a>
  </div>
</div>

---

或者您可以将提示放在

中。此java脚本与foundation5工具提示具有相同的效果，但对于表单元素，不使用工具提示插件

HTML代码：

<input type="text" placeholder="name" data-tooltip title="This is the tip" />

---

你弄明白了吗？也在努力寻找答案。

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.

.tooltip.tip-me { 
  left: 1em
  display: block
  top: -1em
  position: relative
}
.tip-place {
  height: 0
}