如何在鼠标悬停复选框时显示一些信息？

Question

我有几个复选框。当我将鼠标悬停在它们上面时，我想显示一些与这些复选框相关的信息。我该如何使用JS或JQuery实现？假设这是我的复选框：

 <input type="checkbox" value="monday" checked="checked">

我想向用户展示“ Hello User”或值为“ monday”的数据，或来自我的数据库的一些数据。如何实现？

- Ashish Kumar Sahoo

---

是的，这是可能的（而且jQuery就是JavaScript）。你尝试过什么？ - Matt Ball

这个问题是在谷歌上的第一个搜索结果，并且对我有所帮助。投票支持重新开启。 - Basilevs

只需将输入内容包装在 span 标签内，并向 span 标签添加 title 属性即可。 - Paras Sachapara

Answer 1

只需在您的HTML对象中添加一个"title"属性。

<input title="Text to show" id="chk1" type="checkbox" value="monday" checked="checked" />

或者使用 JavaScript

document.getElementById("chk1").setAttribute("title", "text to show");

或者使用jQuery

$('#chk1').attr('title', 'text to show');

- Louis Ricci

---

简单就是最好的... - user3370889

不适合触摸屏。 - SSED

@SSED - 触摸屏幕没有“hover”功能。您需要使用“touchstart”事件来尝试创建一些类似的效果。https://stackoverflow.com/a/39387341/884862 HTML标题属性及其功能是在触摸屏幕出现之前创建的，因此您必须完全依靠JavaScript来实现您想要的效果。 - Louis Ricci

这是一段相当棒的代码，哇 :D - The Dead Man

Answer 2

你可以使用属性 title，在渲染时从数据库中获取 title 的值并添加到元素中。

 input type='checkbox' title='tooltip 2'

您可以使用JS插件（需要将所需文本的值作为属性添加，请参阅文档）http://onehackoranother.com/projects/jquery/tipsy/

- Anton Baksheiev

Answer 3

这里是您的答案：

<input type="checkbox" value="monday" checked="checked">
  <div>informations</div>

和 CSS：

input+div{display:none;}
input:hover+div{display:inline;}

你可以在这里找到一个示例。

- Dan Ovidiu Boncut

Answer 4

有这样的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>

您可以使用jQuery的“this”处理程序来轻松显示文本，它指的是当前悬停的元素。

$(".checkboxContainer").hover(
    function() {
        $(this).find(".infoCheckbox:first").show();
    },
    function() {
        $(this).find(".infoCheckbox:first").hide();
    }
);

演示在这里： http://jsfiddle.net/pdRX2/

- Louis XIV

---

这个代码片段无法运行！ - H.M Maruf

Answer 5

<input type="checkbox" id="cb" value="monday" checked="checked">

$("#cb").hover(
   function() {
      // show info
   },
   function() {
      // hide info
   }
);

或者你可以在元素中添加title属性

- Adil Shaikh

Answer 6

快速粗略地尝试一下（未经测试或任何东西，并且并不完全理解您想要什么...更不用说您实际尝试了什么...也许可以尝试以下内容...

$('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*/
});

当然有很多方法可以做同样的事情，从使用 toggle() 到使用 on() 等等。

- chris