Comment montrer quelques informations tout en passez la souris sur la case à cocher?

J'ai quelques cases à cocher. J'en veux pour preuve certaines informations font partie de ces cases alors que je planent sur eux. Comment puis-je le faire en utilisant JS ou JQuery?
Supposons que c'est ma case

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

Je veux montrer à l'utilisateur "Bonjour de l'Utilisateur ou de la valeur 'lundi' ou une partie des données de ma Base de données. Comment?

Oui, c'est possible (et jQuery JavaScript). vous essayé?
Cette question a été un premier succès dans Google et m'a aidé. Droit de vote pour les rouvrir.

OriginalL'auteur Ashish Kumar Sahoo | 2013-01-16

29

Il suffit d'ajouter un attribut "title" de 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 en jQuery
```
$('#chk1').attr('title', 'text to show');
```
la simplicité à son meilleur...
pas bon pour l'écran tactile
il n'y a pas de "hover" pour les écrans tactiles. Vous auriez besoin d'utiliser les "évènements touchstart" événement de créer un facsimily. stackoverflow.com/a/39387341/884862 Le HTML l'attribut de Titre et sa fonction a été créé avant les écrans tactiles étaient une chose, de sorte que vous devez compter uniquement sur javascript pour obtenir ce que vous voulez.

OriginalL'auteur Louis Ricci
10

Vous pouvez utiliser l'attribut title, et à l'étape de rendu d'ajouter de la valeur du titre à partir de votre base de données
```
 input type='checkbox' title='tooltip 2'
```
Vous pouvez utiliser js du plugin(vous devez ajouter la valeur de requered texte comme attribut, voir docs)
http://onehackoranother.com/projects/jquery/tipsy/

OriginalL'auteur 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

OriginalL'auteur Dan Ovidiu Boncut

Avec une structure html comme ceci:

<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 fait référence à l'élément courant plané:

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

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

OriginalL'auteur 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 pour votre élément

OriginalL'auteur Mohammad Adil

0

De jeter un coup d'brut stab (pas testé ou quoi que ce soit, et ne pas bien comprendre ce que vous voulez.. encore moins de ce que vous avez réellement essayé.. peut-être quelque chose à 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 ya beaucoup de façons de faire la même chose, à partir peut-être quelque chose à l'aide de toggle() à quelque chose comme on()

OriginalL'auteur chris

Vous devez vous connecter pour publier un commentaire.