28183 sujets

CSS et mise en forme, CSS3

Tooltip CSS

Bonjour,

Je cherche à faire un beau tooltip en pur CSS. Ce tooltip doit pouvoir contenir du texte et des images.
Je voudrais eviter le javascript et avoir une bonne compatibilité.

Je ne parviens pas à faie quelque chose de bon ni à trouver des informations convenables à ce sujet.

Est ce que quelqun a déjà eu à faire ce genre de choses ?

Merci d'avance.
Ben il suffit d'utiliser :hover, et éventuellement :focus, pour un élément (disons un DIV) avec tabindex="0" pour permettre le focus au clavier.

<div tabindex="0" class="hastooltip">
	<p>Contenu principal.</p>
	<p class="tooltip">Mon tooltip.</p>
</div>

.hastooltip {
	position: relative;
}
.hastooltip .tooltip {
	display: none;
	position: absolute;
	top: -20px;
	right: -50px;
	height: 40px;
	width: 100px;
	background: red;
}
.hastooltip:hover .tooltip,
.hastooltip:focus .tooltip {
	display: block;
}
neutronweb a écrit :
oui mais le :hover n'est pas supporté par tout les navigateurs.

Bah c'est toi qui veut du full-CSS.
Si tu veux la compatibilité IE6 (seul navigateur actuel à avoir un problème avec le :hover), il faut utiliser JavaScript.

neutronweb a écrit :
A quoi sert le focus dans ce que tu indique ? Quel est l'interet d'appliquer un focus sur un tooltip ?

L'intérêt est de rendre l'information accessible également pour la navigation au clavier.
Bonjour,

Ok, est ce que tu as un bon tuto pour faire ceci en javascript non intrusif car je ne veux pas de javascript dans mon code je le veux propre au maximum et visiblement tout ce que je trouve implique d'ajouter directement des evenement dans les balises Smiley decu
Bonsoir,
neutronweb a écrit :
Je cherche à faire un beau tooltip en pur CSS. Ce tooltip doit pouvoir contenir du texte et des images.
Je voudrais ... avoir une bonne compatibilité.

neutronweb a écrit :
est ce que tu as un bon tuto pour faire ceci en javascript non intrusif

Tu peux utiliser clueTip pour obtenir ce que tu recherches, très simple et très rapide à mettre en oeuvre : jQuery clueTip Plugin
Bonsoir,

Merci pour ces réponses mais au risque d'etre un peu desagreable je voudrais une solution légère qui ne necessite pas de charger des libreries JS de 200ko juste pour un tooltip.

Conaissez vous un script simple à savoir que je doit pouvoir placer du contenu image + texte dans ce tooltip ?

D'avance merci.
Compressé, jQuery ne fait que 55Ko et le plugin Tooltip à peine 5Ko.

Si tu veux gérer les différences de navigateurs et les problèmes de positionnement (sortie de l'écran) et de superposition, c'est un maigre poids à payer.

Tout dépends de ton utilisation, si tu veux juste simuler le :hover même sous IE6 il te suffit d'appliquer un évenement onmouseover à tes éléments et de leur ajouter une classe (par exemple .hover, tu remplaces :hover par .hover dans ton css).
En fait jQuery ne fait que 30ko en pack et 15ko si tu as gzip d'activé. C'est néanmoins un peu dommage d'utiliser une librairie js juste pour une tooltip mais si le site possède des onglets, un menu déroulant ou deux trois autres fonctions, la librairie est vite amortie.
Bonjour et merci.

Ou peut on trouver des infos sur Jquery en pack et d'ailleurs a quoi ceci fait allusion ?

Concernant gzip, il faut définir clairement au niveau serveur que le fichier doit etre envoyé compressé ou non car là on est pas dans une page généré coté serveur comme PHP où on peux clairement le définir avec des fonctions qui ce charge de voir si le client est compatible ou non !

Merci d'avance.

Au passage je suis toujours preneur d'un tooltip version light avec possibilité de placer du HTML dedant sans avoir à charger 50ko de javascript Smiley langue
Mais bon sinon je me placerais sur la solution jQuery.
Sujet clos
Aller à