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

Question

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

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

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

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

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/