1

html：

<div id='wrapper'>
<div id='settings'>Settings'</div>
<div id='menu'>
   Jobname <input type=text id='tipjob' title='this text should go into the tooltip' length='20'>
   Appname <input type=text id='tipapp' title='this text should as app text in the tooltip' length='20'>
</div>            
  <div id="build">Builds
      <div id="build-log">Build Log</div>
  </div>
  <div id="content">Content
      <div id="tooltips">Tooltip</div>
  </div>
<div id='footer'>Footer</div>
</div>

javascript：

$(document).ready(function(){
$('#tipjob').bind('mouseenter', function() {
    $('#tooltips').fadeIn();
});
$('#tipjob').bind('mouseleave', function() {
    $('#tooltips').fadeOut();
});
});

jsfiddleのcssも参照してください。

http://jsfiddle.net/yZZDd/433/

上記の例（機能していない）では、人が入力フィールドにカーソルを合わせたときに、一部のテキストをフェードイン/フェードアウトできるようにしたいと考えています。テキストは、現在cssに隠されているdivの「ツールチップ」に入力する必要があります（おそらく最善の方法ではない可能性があります）

デフォルトのjquery以外の他のツールチップライブラリは必要ありません（ツールチップに関しては、その必要性がわからないため）

したがって、入力フィールドごとにmouseenter / mouseleaveを使用し、フェードインフェードアウトを設定すると想定していますが、入力フィールドのテキストをそこに配置する方法がわかりません。

1つの入力フィールドから始めたので、divを表示および非表示にすることができましたが、2番目の入力フィールドで問題になりました:)

私がそれを正しく説明したことを願っています。ここで最初のタイマー。

4

2 に答える 2

1

これを試してください-デモ

$(document).ready(function(){
    $('input').on({
        mouseenter: function() {
            $('#tooltips').text( $(this).prop("title") ).stop(1, 1).fadeIn();
        },
        mouseleave: function() {
            $('#tooltips').fadeOut();
        }
    });
});
于 2012-12-25T17:10:51.500 に答える
0

これを参照してください：http：//jsfiddle.net/yZZDd/448/

代わりに使用をid使用class

$(document).ready(function(){
   $('.tipjob').bind('mouseenter', function() {
      $('#tooltips').text('').text($(this).attr('title')).stop().fadeIn();
   });
   $('.tipjob').bind('mouseleave', function() {
      $('#tooltips').stop().fadeOut();
   });
});
于 2012-12-25T17:14:09.460 に答える