HTML <option> tag tooltip

J'ai un tag avec de nombreux nœuds enfants. Je veux garder la largeur de cette liste déroulante à une taille minimum. Cependant, il y a des moments où le innerHTML d'au moins une option est très long, forçant la liste déroulante à élargir sa largeur. Ce que j'ai l'intention de faire est de tronquer le texte long et d'utiliser des ellipses pour indiquer que certains caractères ont été tronqués ("phrase très loooooong" devient "très loooooo .."). Pour afficher le texte intégral, je pense à utiliser un message d'info-bulle sur l'événement mouse over.HTML <option> tag tooltip

Malheureusement, l'événement onmouseover pour chaque tag ne semble pas fonctionner. Que puis-je faire pour obtenir cet effet?

Merci

Source

2010-02-05 Erwin

Avez-vous essayé d'utiliser CSS sur la balise

L'attribut css max-width/width a fonctionné. Cependant, j'essaie de montrer le texte intégral en utilisant simplement les fonctionnalités par défaut de HTML – Erwin

Ajout d'un attribut title à chaque option devrait faire l'affaire.

<option value="1" title="Long description">Short desc...</option>

Source

2010-02-05 08:11:03 salgiza

Wow .. cela fonctionne. Woulda n'a jamais suspecté :) – Erik

Hey cool! Ça a marché! Est-ce une solution multi-plateforme? – Erwin

AFAIK, oui. Le titre est un attribut HTML standard et devrait fonctionner entre les navigateurs et les systèmes d'exploitation. Il ne fonctionnera probablement pas dans les dispositifs tactiles tels que l'iPhone, cependant (parce qu'il n'y a aucun curseur pour passer au-dessus des options). – salgiza

Vous pouvez régler la largeur de la <select> et le menu déroulant se prolonger au-delà de la largeur de la sélection. Essayez ce qui suit:

<select style="width: 30px"> 
    <option>1</option> 
    <option>really long</option> 
    <option>even more longer</option> 
    <option>This should be long enough to stretch to the end of the page, but the select is still not very long</option> 
</select>

Source

2010-02-05 08:15:04 Marius

HTML <option> tag tooltip

Répondre

Questions connexes