How to show some information while hover on checkbox? [closed]

Answer 1

Just add a "title" attribute to your HTML object.

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

Or in JavaScript

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

Or in jQuery

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

Answer 2

With an html structure like that:

<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:

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

Demo here: http://jsfiddle.net/pdRX2/

Answer 3

Here is your answer:

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

and the css:

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

You have an example here

Answer 4

<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

Answer 5

You can use attribute title and on step rendering add value of title from your database

 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/

Answer 6

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