Afficher une infobulle quand le texte est trop grand

Bonjour,

Dans une page web, j'ai des conteneurs (div ou span) qui affichent des informations qui sont plus ou moins détaillées. Pour que le texte ne dépasse pas des conteneurs qui ont une taille déterminée j'utilise les propriétés css suivantes : overflow:hidden et text-overflow:ellipsis.

Je souhaiterai en utilisant qTip2 afficher une info-bulle seulement lorsque le texte dépasse la taille du conteneur au passage de la souris. Mais comment déterminer que le texte dépasse ou pas d'un conteneur ?

Quelqu'un aurait-il une suggestion à me faire ?

Merci d'avance.

Avec un conteneur de largeur fixe, et dedans un conteneur (par exemple un P) pour le texte en white-space:nowrap, tu peux utiliser JavaScript pour tester la largeur du conteneur de largeur fixe (ou la coder en dur dans ton script JS) et surtout récupérer la largeur du P. S'il est plus large que le conteneur: ajouter une infobulle.

Le problème de cette technique, c'est que ça ne sera pas compatible avec un text-overflow:ellipsis, qui va empêcher que le P soit plus large que le conteneur justement.

Il te reste la possibilité de compter le nombre de caractères et de faire une estimation à la louche. C'est bien sûr de la logique applicative donc ça demande de passer par un langage de programmation: soit JavaScript côté client, soit le langage que tu utilises côté serveur.

Merci pour votre réponse et votre réactivité.

En fait, j'utilise text-overflow:ellipsis et donc il va me falloir faire le test côté serveur et ajouter une classe qui me permette d'afficher l'info-bulle si nécessaire.
Le fait de compter les caractères est très imprécis car un i et un o n'occupent pas le même nombre de pixels !! Mais cela peut-être une solution car le fait d'afficher une info-bulle sur quelques textes qui n'en nécessiterai normalement pas n'est pas non plus très handicapant pour la clarté du site.

Merci et bonne journée.