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 スクリプトは、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
}
于 2014-05-30T05:19:33.503 に答える