Javascript 悬停在复选框上时如何显示一些信息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14360927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show some information while hover on checkbox?
提问by Ashish Kumar Sahoo
I have few checkboxes. I want to show some information belong to those checkboxes while I hover on them. How do I do it using JS or JQuery? Suppose this is my checkbox
我有几个复选框。当我将鼠标悬停在这些复选框上时，我想显示一些属于这些复选框的信息。我如何使用 JS 或 JQuery 做到这一点？假设这是我的复选框
<input type="checkbox" value="monday" checked="checked">
I want to show a user "Hello User or the value 'monday' or some data from my Database. How?
我想向用户显示“你好用户或值‘星期一’或我的数据库中的一些数据。如何？
回答by Louis Ricci
Just add a "title" attribute to your HTML object.
只需向 HTML 对象添加“标题”属性即可。
<input title="Text to show" id="chk1" type="checkbox" value="monday" checked="checked" />
Or in JavaScript
或者在 JavaScript 中
document.getElementById("chk1").setAttribute("title", "text to show");
Or in jQuery
或者在 jQuery 中
$('#chk1').attr('title', 'text to show');
回答by Anton Baksheiev
You can use attribute title and on step rendering add value of title from your database
您可以使用属性 title 并在逐步渲染中从数据库中添加 title 的值
input type='checkbox' title='tooltip 2'
You can use js plugin(you need to add value of requered text as attribute, see docs) http://onehackoranother.com/projects/jquery/tipsy/
您可以使用 js 插件（您需要将 requered 文本的值添加为属性，请参阅文档） http://onehackoranother.com/projects/jquery/tipsy/
回答by Dan Ovidiu Boncut
回答by Louis XIV
With an html structure like that:
使用这样的 html 结构：
<div class="checkboxContainer">
<input type="checkbox" class="checkboxes"> Checkbox 1
<div class="infoCheckbox">
<p>Info on checkbox 1</p>
</div>
</div>
<div class="checkboxContainer">
<input type="checkbox" class="checkboxes"> Checkbox 2
<div class="infoCheckbox">
<p>Info on checkbox 2</p>
</div>
</div>
<div class="checkboxContainer">
<input type="checkbox" class="checkboxes"> Checkbox 3
<div class="infoCheckbox">
<p>Info on checkbox 3</p>
</div>
</div>
You can easily show the text with "this" handler of jQuery which refers to the current element hovered:
您可以使用 jQuery 的“this”处理程序轻松显示文本，该处理程序引用当前悬停的元素：
$(".checkboxContainer").hover(
function() {
$(this).find(".infoCheckbox:first").show();
},
function() {
$(this).find(".infoCheckbox:first").hide();
}
);
Demo here: http://jsfiddle.net/pdRX2/
演示在这里：http: //jsfiddle.net/pdRX2/
回答by Mohammad Adil
<input type="checkbox" id="cb" value="monday" checked="checked">
$("#cb").hover(
function() {
// show info
},
function() {
// hide info
}
);
Or you could just add title attribute to your element
或者您可以将 title 属性添加到您的元素
回答by chris
Taking a quick crude stab (not tested or anything, and not fully understanding what you want.. let alone what you've actually tried.. maybe something to the extent of..
快速粗暴地刺伤（未经测试或任何事情，并且没有完全理解你想要什么......更不用说你实际尝试过的......也许达到......的程度）
$('input:checkbox').mouseover(function()
{
/*code to display whatever where ever*/
//example
alert($(this).val());
}).mouseout(function()
{
/*code to hide or remove displayed whatever where ever*/
});
of course there are plenty of ways to go about doing the same thing, from maybe something using toggle()to something like on()
当然，有很多方法可以做同样的事情，从可能使用toggle()的东西到类似的东西on()
