Jquery - 在悬停输入时显示 div
Jquery - show div on input hover
我正在尝试制作不需要任何第 3 方代码的工具提示。我想在 jQuery & CSS 中完成。
它需要支持新行,并且只在悬停在输入元素上时显示。
如果可能,我不想向 HTML 页面添加额外代码或向输入字段添加标题。
我创建了一个包含要显示的文本的 object,实时 object 还将包含其他值。
tooltip = {
'sitea': { 'tip': 'Site A Hover' },
'siteb': { 'tip': 'Site A Hover' },
'sitec': { 'tip': 'Site A Hover' }
}
当我将鼠标悬停在输入上时,我希望 div 显示 object 中的文本。到目前为止,我的悬停工作正常,但我不确定如何执行 div 并仅在悬停时显示它。
$(":input").hover( function() {
$(this).css('cursor','pointer')
}, function() {
$(this).css('cursor','auto');
})
我发现这个 FIDDLE,它似乎适用于 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 和更改工具提示。
我使用以下 fiddle 得到了他的工作:
http://jsfiddle.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 );
})
谢谢
我正在尝试制作不需要任何第 3 方代码的工具提示。我想在 jQuery & CSS 中完成。 它需要支持新行,并且只在悬停在输入元素上时显示。
如果可能,我不想向 HTML 页面添加额外代码或向输入字段添加标题。
我创建了一个包含要显示的文本的 object,实时 object 还将包含其他值。
tooltip = {
'sitea': { 'tip': 'Site A Hover' },
'siteb': { 'tip': 'Site A Hover' },
'sitec': { 'tip': 'Site A Hover' }
}
当我将鼠标悬停在输入上时,我希望 div 显示 object 中的文本。到目前为止,我的悬停工作正常,但我不确定如何执行 div 并仅在悬停时显示它。
$(":input").hover( function() {
$(this).css('cursor','pointer')
}, function() {
$(this).css('cursor','auto');
})
我发现这个 FIDDLE,它似乎适用于 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 和更改工具提示。
我使用以下 fiddle 得到了他的工作:
http://jsfiddle.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 );
})
谢谢