Как показать некоторую информацию при наведении на флажок?

У меня мало флажков. Я хочу показать некоторую информацию, относящуюся к этим флажкам, пока я на них курю. Как это сделать с помощью JS или JQuery? Предположим, что это мой флажок

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

Я хочу показать пользователю "Hello User" или "Monday" или некоторые данные из моей базы данных. Как?

Ответ 1

Просто добавьте атрибут "title" к вашему объекту HTML.

<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');

Ответ 2

Вот ваш ответ:

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

и css:

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

У вас есть пример здесь

Ответ 3

Вы можете использовать заголовок атрибута и при рендеринге шага добавить значение заголовка из своей базы данных

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

Вы можете использовать js-плагин (вам нужно добавить значение запрашиваемого текста в качестве атрибута, см. docs) http://onehackoranother.com/projects/jquery/tipsy/

Ответ 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>

Вы можете легко показать текст с помощью обработчика "this" jQuery, который ссылается на текущий элемент:

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

Демо здесь: http://jsfiddle.net/pdRX2/

Ответ 5

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

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

Или вы можете просто добавить атрибут title к элементу

Ответ 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()