Question

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

<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>

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

Answer 1

尝试

<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>

或者您可以将小费放在<div class="small-9 columns">

中

Answer 2

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

HTML代码：

<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.

最后是一些CSS代码

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

如何使用zurb基础在输入字段上添加工具提示

2 个答案: