web-dev-qa-db-fra.com

Comment afficher des informations en survolant sur la case à cocher?

J'ai quelques cases à cocher. Je veux montrer que certaines informations appartiennent à ces cases à cocher pendant que je les survole. Comment puis-je le faire en utilisant JS ou JQuery? Supposons que c'est ma case à cocher

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

Je souhaite afficher un utilisateur "Bonjour utilisateur ou la valeur" lundi "ou certaines données de ma base de données. Comment?

javascriptjqueryhtmlcss
23
Ashish Kumar Sahoo

Ajoutez simplement un attribut "title" à votre objet HTML.

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

Ou en JavaScript

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

Ou dans jQuery

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

Vous pouvez utiliser le titre de l'attribut et, lors du rendu d'étape, ajouter de la valeur au titre de votre base de données

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

Vous pouvez utiliser le plugin js (vous devez ajouter la valeur du texte requis comme attribut, voir la documentation) http://onehackoranother.com/projects/jquery/tipsy/

12
Anton Baksheiev

Voici votre réponse:

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

et le css:

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

Vous avez un exemple ici

9
Dan Ovidiu Boncut

Avec une structure html comme ça:

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

Vous pouvez facilement afficher le texte avec "ce" gestionnaire de jQuery qui se réfère à l'élément courant survolé:

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

Démo ici: http://jsfiddle.net/pdRX2/

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

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

Ou vous pouvez simplement ajouter un attribut title à votre élément

0
Mohammad Adil

Prendre un coup de couteau brut (pas testé ou quoi que ce soit, et ne pas comprendre pleinement ce que vous voulez .. sans parler de ce que vous avez réellement essayé .. peut-être quelque chose dans la mesure 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*/
});

bien sûr, il existe de nombreuses façons de faire la même chose, de quelque chose utilisant peut-être toggle() à quelque chose comme on()

0
chris