使用输入标题文本的DIV

HTML：使用输入标题文本的DIV

<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(); 
}); 
});

看到CSS上的jsfiddle了。

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

在上面的例子（非工作）我想能够淡入/淡出一些文本，当一个人悬停在输入字段。文本应该进入现在隐藏在CSS中的div“工具提示”（可能不是最好的方式）

我不需要任何其他工具提示库的其他默认jQuery（因为我没有看到它的需要，关于工具提示）

所以我假设我使用mouseenter/mouseleave每个输入字段，然后设置淡入淡出，但我不知道如何把输入字段中的文本以某种方式。

自从我开始用1个输入字段我可以显示和隐藏DIV，而是变成了与第二输入字段:)

希望我正确解释它的一个问题。第一次在这里。

来源

2012-12-25 Erik-Jan Riemers

试试这个 - DEMO

$(document).ready(function(){ 
    $('input').on({ 
     mouseenter: function() { 
      $('#tooltips').text($(this).prop("title")).stop(1, 1).fadeIn(); 
     }, 
     mouseleave: function() { 
      $('#tooltips').fadeOut(); 
     } 
    }); 
});

来源

2012-12-25 17:10:51

那是快，谢谢。这是行得通的。虽然我注意到，如果您从一个输入移动到另一个输入时，它会表现出“奇怪”，但您必须在输出字段远离输入字段时将鼠标移开，以便重置。但这可能是一个jQuery的东西？ –

我想你应该在'fadeIn'和'fadeOut'中使用'stop（1,1）'[像这样]（http://jsfiddle.net/yZZDd/445/）。 –

@SheikhHeera没错 - '停止（1,1）'确实有帮助，但它只用了一次就足够了 - http://jsfiddle.net/yZZDd/447/ –

见这一个：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-25 17:14:09 Jai

这个也可以，谢谢。虽然如果你能够更快地将它悬停在它上面，它“记住”它。如zoltans答案所示，停止可用于不具有此功能。（或者看Sheikh Heera的溶剂） –

是的你是对的。只是更新了答案。 – Jai

使用输入标题文本的DIV

回答

相关问题