web-dev-qa-db-fra.com

Afficher l'infobulle sur le survol de l'étiquette?

J'ai sous le code HTML?

<label for="male">Hello This Will Have Some Value</label>

Mais en fait, je n'ai pas assez d'espace pour afficher cette étiquette très longue. J'ai donc pensé à créer une étiquette comme ci-dessous ..

<label for="male">Hello...</label>

Ensuite, je crée un champ caché qui contiendra la valeur entière de l'étiquette

<input type="hidden" name="Language" value="Hello This Will Have Some Value">

Maintenant, lorsque l'utilisateur passe la souris sur Hello... puis-je afficher la valeur du champ caché Hello This Will Have Some Value dans l'info-bulle en utilisant jquery?

Merci!

javascriptjqueryhtmlcsshtml5
23
user755806

Vous pouvez utiliser le "attribut de titre" pour l'étiquette d'étiquette.

<label title="Hello This Will Have Some Value">Hello...</label>

Si vous avez besoin de plus de contrôle sur l'apparence,

1 . essayez http://getbootstrap.com/javascript/#tooltips comme indiqué ci-dessous. Mais vous devrez inclure le bootstrap.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Hello This Will Have Some Value">Hello...</button>

2. essayez https://jqueryui.com/tooltip/ . Mais vous devrez inclure jQueryUI.

<script type="text/javascript">
$(document).ready(function(){
$(this).tooltip();
});
</script>
45
sanchit

Vous n'avez pas besoin d'utiliser un champ caché. Utilisez la propriété "title". Il affichera l'info-bulle par défaut du navigateur. Vous pouvez ensuite utiliser le plugin jQuery (comme mentionné précédemment bootstrap info-bulle) pour afficher l'info-bulle au format personnalisé.

<label for="male" title="Hello This Will Have Some Value">Hello ...</label>

Astuce: vous pouvez également utiliser css pour rogner le texte, qui ne rentre pas dans la zone (propriété text-overflow). Voir http://jsfiddle.net/8eeHs/

5
longchiwen

Définissez simplement un titre sur l'étiquette:

<label for="male" title="Hello This Will Have Some Value">Hello...</label>

Utilisation de jQuery:

<label for="male" data-title="Language" />
<input type="hidden" name="Language" value="Hello This Will Have Some Value">

$("label").prop("title", function() {
    return $("input[name='" + $(this).data("title") + "']").text();
});

Si vous pouvez utiliser CSS3, vous pouvez utiliser le text-overflow: Ellipsis; pour gérer les points de suspension à votre place, il vous suffit donc de copier le texte de l'étiquette dans l'attribut title à l'aide de jQuery:

HTML: 

<label for="male">Hello This Will Have Some Value</label>

CSS: 

label {
    display: inline-block;
    width: 50px;
    text-overflow: Ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

jQuery: 

$("label").prop("title", function() {
   return $(this).text(); 
});

Exemple: http://jsfiddle.net/Xm8Xe/

Enfin, si vous avez besoin d'une prise en charge robuste et multi-navigateurs, vous pouvez utiliser le plugin DotDotDot jQuery .

1
CodingIntrigue

Êtes-vous d'accord avec l'utilisation de l'infobulle standard? Vous pouvez utiliser l'attribut title comme

<label for="male" title="Hello This Will Have Some Value">Hello...</label>

Vous pouvez également ajouter l'attribut title de la même valeur à l'élément auquel l'étiquette est destinée.

1
Hans

Vous pouvez utiliser l'attribut title en html :)

<label title="This is the full title of the label">This is the...</label>

Lorsque vous gardez la souris sur pendant un bref instant, elle devrait apparaître avec une boîte, contenant le titre complet.

Si vous voulez plus de contrôle, je vous suggère de regarder dans le Plugin Tipsy pour jQuery - Il peut être trouvé à http://onehackoranother.com/projects/jquery/tipsy/ et est assez simple pour commencer avec.

0
Fizk

Si vous avez également jQuery UI, vous pouvez ajouter ceci:

$(document).ready(function () {
  $(document).tooltip();
});

Vous avez alors besoin d'un titre au lieu d'une entrée cachée. RGraham a déjà posté une réponse faisant ceci pour vous: P

0
KoalaBear

Les info-bulles dans bootstrap sont bonnes, mais il y a aussi une très bonne fonction d'info-bulles dans jQuery UI, que vous pouvez lire sur ici .

Exemple:

<label for="male" id="foo" title="Hello This Will Have Some Value">Hello...</label>

Ensuite, en supposant que vous avez déjà référencé les bibliothèques jQuery et jQueryUI dans votre tête, ajoutez un élément de script comme ceci:

<script type="text/javascript">
$(document).ready(function(){
    $(this).tooltip();
});
</script>

Cela affichera le contenu de l'attribut title sous forme d'infobulle lorsque vous survolez un élément avec un attribut title.

0
Andy Kaufman