¿Cómo se muestra información mientras se coloca el cursor sobre la checkbox?

Tengo pocas casillas de verificación. Quiero mostrar que parte de la información pertenece a esas casillas de verificación mientras estoy sobre ellas. ¿Cómo lo hago usando JS o JQuery? Supongamos que esta es mi casilla

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

Quiero mostrarle a un usuario "Hola usuario o el valor 'lunes' o algunos datos de mi database. ¿Cómo?

Simplemente agregue un atributo de "título" a su object HTML.

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

O en JavaScript

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

O en jQuery

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

Aquí está tu respuesta:

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

y el css:

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

Tienes un ejemplo aquí

Puede usar el título del atributo y en la representación por pasos agregar el valor del título de su database

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

Puede usar el complemento js (debe agregar el valor del text requerido como atributo, consulte los documentos) http://onehackoranother.com/projects/jquery/tipsy/

Con una estructura html como esa:

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

Puede mostrar fácilmente el text con "este" controller de jQuery, que hace reference al elemento actual que se encuentra:

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

Demostración aquí: http://jsfiddle.net/pdRX2/

 <input type="checkbox" id="cb" value="monday" checked="checked"> $("#cb").hover( function() { // show info }, function() { // hide info } ); 

O simplemente podría agregar un atributo de título a su elemento

Tomando una puñalada rápida (no probada ni nada, y no entendiendo completamente lo que quieres … y mucho less lo que en realidad has intentado … tal vez algo en la medida de …

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

por supuesto, hay muchas forms de hacer lo mismo, tal vez algo con toggle() a algo así como on()