我正在尝试制作一个不需要任何第三方代码工具提示。我想在jQuery&CSS中实现。它需要支持新行，并且只在悬停在输入元素上时显示。
我不想在HTML页面中添加额外的代码，或者在可能的情况下在输入字段中添加一个标题。
我已经创建了一个对象，其中包括要显示的文本，活动对象还将包含其他值。
tooltip = {
'sitea': { 'tip': 'Site A Hover' },
'siteb': { 'tip': 'Site A Hover' },
'sitec': { 'tip': 'Site A Hover' }
}
当我悬停在输入上时，我想要一个div来显示来自对象的文本。到目前为止，我已经使悬停工作，但我不知道如何做div和显示它只在悬停。
$(":input").hover( function() {
$(this).css('cursor','pointer')
}, function() {
$(this).css('cursor','auto');
})
我找到了这个小提琴，它似乎适用于td，有没有用它来显示输入？
谢谢
请尝试以下操作：
将此添加到您的css文件中。
div:hover > .div-to-display {
display: block
}
将此添加到javascript文件中：
$('div').append('<div class="div-to-display">yay</div>');
添加要在其上显示工具提示的新div标记。
<div>newly added div tag (hover to diplay tooltip </div>
当然，您可以根据需要添加css和更改工具提示。
我让他用下面的小提琴工作：
http://jsfidle.net/wjh6va8k/1/
CSS：
.tooltip {
display: block
border: 1px solid #000000;
background-color: #008800;
color: #ffffff;
padding: 5px;
border-radius: 3px;
}
JS
$(":input").hover( function(e) {
$('body').append('<div id="tooltip" class="tooltip">Tooltip<br>New line</div>').show()
elmTop = $(this).offset().top + 10;
elmWidth = $(this).width() + 10;
$('#tooltip').css( 'position', 'absolute' );
$('#tooltip').css( 'top', elmTop );
$('#tooltip').css( 'left', elmWidth );
})
谢谢
