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，但这成为第二个输入字段的问题 :)

希望我解释正确。第一次来这里。

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