info-bulles pour le bouton

292

Est-il possible de créer une info-bulle pour un bouton html. C'est le bouton HTML normal et il n'y a pas d'attribut Title car il est là pour certains contrôles HTML. Des pensées ou des commentaires?

html button tooltip SARAVAN
la source

Réponses:

559

Ajoutez simplement un titleà votre button.

<button title="Hello World!">Sample Button</button>
Développer l'extrait

Muad'Dib
la source
9
@EduardLuca, Dans mon cas, l'infobulle ne fonctionne vraiment pas sur les disabledboutons car Bootstrap définit l' pointer-events: noneétat désactivé. Il devrait fonctionner s'il est défini pointer-events: autodirectement sur l'élément.
Vitaliy Alekask
c'est aussi cela, l'info-bulle visera à montrer le bas de l'endroit où se trouve la souris. Donc, si l'élément cible se trouve en bas à droite de l'écran, l'infobulle se glisse sur le pointeur de la souris. Plus généralement: la position de la pointe n'est parfois pas intelligente ... mais je suppose que ce ne sont que les navigateurs.
gideon
1
Il existe des situations où des info-bulles sont nécessaires , mais il est important de prendre en compte votre base d' utilisateurs lors de l'utilisation de la méthode dans cette réponse. J'ai utilisé l' titleattribut pour afficher un raccourci clavier pour un bouton parce que les raccourcis ne sont pas nécessaires et que seuls les appareils tactiles n'utilisent pas de clavier.
Dave F
mais cela ne montre pas l'infobulle lorsque vous utilisez le clavier pour concentrer le bouton, une autre astuce pour gérer cela? Je suppose que c'est un problème d'accessibilité, non?
Nikhil
Référence: HTML Living Standard 3.2.6.1 L'attribut title .
Ludovic Kuty
43

à la fois <button>tag et <input type="button">accepter un attribut de titre ..

Gabriele Petrioli
la source
Qu'en est-il des liens HTML simples utilisant <a>et href?
Aaron Franke
1
@AaronFranke oui les abalises ainsi que toutes les balises prennent en charge l' titleattribut. Voir developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
Gabriele Petrioli
12

Utilisez l' titleattribut. Il s'agit d'un attribut HTML standard et est rendu par défaut dans une info-bulle par la plupart des navigateurs de bureau.

skyman
la source
Le problème que je lis souligne cependant que l'attribut title n'est pas entièrement pris en charge par de nombreux navigateurs mobiles. Je fais actuellement des recherches sur cela également pour certains problèmes d'ADA et cela ne semble que quelque peu pris en charge.
isaac weathers
3
@isaacweathers Eh bien, comment voulez-vous "survoler" dans un navigateur mobile, de toute façon, pour voir le titre?
mbomb007
@ mbomb007 -: l'état de focus sur iOS avec la voix off est à peu près aussi proche de l'attribut hover que vous pourriez obtenir.
isaac weathers
Les liens sont fantastiques, mais ils ne devraient jamais être le seul élément d'information dans votre réponse. Quand quelqu'un va sur Stack Exchange, la question "réponse" devrait en fait contenir une réponse. Pas seulement un tas de directions vers la réponse.
Erik Philips
10

Pour tous ceux qui recherchent une solution folle ici , essayez simplement

title="your-tooltip-here"

dans n'importe quelle balise . J'ai testé en td'et a' et ça marche plutôt bien.

Davidson Lima
la source
2
@krillgar, j'ai donné une solution générale qui fonctionne non seulement avec le bouton mais avec d'autres balises. Mon intention était de renforcer cette possibilité.
Davidson Lima
3
en ce qui concerne votre dernier commentaire, c'est déjà ce que la réponse de skyman disait il y a des années.
Pac0
2

Un bouton accepte un attribut "title". Vous pouvez ensuite lui affecter la valeur que vous souhaitez faire apparaître une étiquette lorsque vous passez la souris sur le bouton.

<button type="submit" title="Login">
Login</button>
Développer l'extrait

Félix Urrutia
la source
1

L'attribut title est destiné à donner plus d'informations. Ce n'est pas utile pour le référencement, donc ce n'est jamais une bonne idée d'avoir le même texte dans le titre et l'alt qui est destiné à décrire l'image ou l'entrée est par rapport à ce qu'il fait. par exemple:

<button title="prints out hello world">Sample Buttons</button>

<img title="Hms beagle in the straits of magellan" alt="HMS Beagle painting" src="hms-beagle.jpg" />

L'attribut title fera une info-bulle, mais il sera contrôlé par le navigateur jusqu'à l'endroit où il apparaît et à quoi il ressemble. Si vous souhaitez plus de contrôle, il existe des options jQuery tierces, de nombreux modèles CSS tels que Bootstrap ont des solutions intégrées, et vous pouvez également écrire une solution CSS simple si vous le souhaitez. découvrez cette solution w3schools .

AU Crawford
la source
-1

Vous devez utiliser les attributs title et alt pour le faire fonctionner dans tous les navigateurs.

<button title="Hello World!" alt="Hello World!">Sample Button</button>
Sergey Gurin
la source
1
Pourquoi devriez-vous utiliser les deux?
Andrei Cioara
parce que certains navigateurs utilisent un attribut alt et un titre
Sergey Gurin
5
Absurdité. L' altattribut est uniquement pour les valides img, input type="image"et les areamots clés.
bitbitdecker