2

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

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

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

4

2 回答 2

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

于 2013-09-05T15:25:42.363 回答
0

这个 java 脚本提供了与基础 5 工具提示相同的效果，但对于没有使用工具提示插件的表单元素。

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
}
于 2014-05-30T05:19:33.503 回答