2 soucis avec tooltip en CSS : largeur du tooltip et centrage sur le lien

[Nenex]

Slt

J'ai trouve un code pour faire mes tooltip entierement en css. J'ai personnalise ce code :

.lien-tooltip {	position: relative;	cursor: help;	display: inline-block;	text-decoration: none;	text-indent:0;	text-align:center;	outline: none;}.lien-tooltip span {	visibility: hidden;	position: absolute;	display:inline-block;	bottom:35px;	left: 50%;	z-index: 999;	width:auto;	;	padding: 10px;	border: 2px solid #000;	-webkit-border-radius:10px;	-moz-border-radius:10px;	-o-border-radius:10px;	border-radius:10px;}.lien-tooltip:hover {	border: 0; /* IE6 fix */}.lien-tooltip:hover span {	visibility: visible;}/*Pointe*/.lien-tooltip span:before,.lien-tooltip span:after {	content: "";	position: absolute;	z-index: 1000;	left: 50%;	;	border-top: 15px solid #ddd;	border-left: 15px solid transparent;	border-right: 15px solid transparent;	border-bottom: 0;}.lien-tooltip span:before {	border-top-color: #ccc;}.lien-tooltip span:after,.lien-tooltip span:before {	bottom:-17px;}/* Couleur du tooltip */.couleur-tooltip span {	background-color: #efce9c;}/* Couleur de la pointe */.couleur-tooltip span:after { 	border-top-color: #6a04aa;}.couleur-tooltip span:before{	border-top-color: #000;}

<a href="#" class="lien-tooltip">Votre texte<span>Votre description personnalisée</span></a>

Mais j'ai 2 petits soucis :

1) la largeur du tooltip ne se modifie pas suivant le contenu. En effet des fois j'ai un simple mot et d'autre fois (rarement, mais j'en ai) une longue phrase d'une trentaines de mots. Donc comment je peux faire pour que le conteneur se dimentionne en largeur et aussi en hauteur suivant le texte. Bien sur avec une largeur maximum.

2) Le tooltip est positionne au dessus du lien et une petite fleche est juste en dessous du tooltip. J'aimerais savoir comment centre l'ensemble "tooltip+fleche" horisontalement par rapport au lien.

Merci d'avance pour votre aide.

[Ernestine]

Salut,

1/ Dans les styles de .lien-tooltip span tu peux rajouter :

white-space:nowrap;

Ça empêchera les retours à la ligne entre chaque mot (équivalent d'espaces insécables entre les mots). Mais évidemment, si tu mets une longue description, la bulle sera très large, et sur une seule ligne. Au pire, tu peux mettre les espaces insécables (   ) directement en HTML où tu le souhaites, mais ce n'est pas pratique.

2/ Étant donné que ni la largeur de la bulle, ni la largeur du libellé du lien, ne sont connus d'avance, ça va être dur de la centrer harmonieusement sur le libellé avec juste du CSS. Même problème pour le curseur par rapport à la bulle, tel que le curseur est actuellement construit. Pour le centrer, une solution serait de mettre un autre div sous le tooltip (de préférence ajouté en javascript), et dans ce div mettre une image de curseur en background, et positionner ce background en center horizontalement.

[Nenex]

Merci pour ta reponse.

Salut,

1/ Dans les styles de .lien-tooltip span tu peux rajouter :

white-space:nowrap;

Ça empêchera les retours à la ligne entre chaque mot (équivalent d'espaces insécables entre les mots). Mais évidemment, si tu mets une longue description, la bulle sera très large, et sur une seule ligne. Au pire, tu peux mettre les espaces insécables (   ) directement en HTML où tu le souhaites, mais ce n'est pas pratique.

J'ai garde ton idee avec white-space mais au lieu de nowrap j'ai mis pre-wrap et j'ai rajoute un max-width:500px. L'idee c'est que si une description fait plus de 500px, la bulle ne s'aggrandit pas au dela de 500px et le texte va a la ligne. Ca marche, mais les bulles font beaucoup moins de 500px.

3 exempes :

2/ Étant donné que ni la largeur de la bulle, ni la largeur du libellé du lien, ne sont connus d'avance, ça va être dur de la centrer harmonieusement sur le libellé avec juste du CSS. Même problème pour le curseur par rapport à la bulle, tel que le curseur est actuellement construit. Pour le centrer, une solution serait de mettre un autre div sous le tooltip (de préférence ajouté en javascript), et dans ce div mettre une image de curseur en background, et positionner ce background en center horizontalement.

Je vais pas batailler et ne pas me prendre la tete pour le centrage et meme supprimer la fleche. C'est pas important.

Modifié 21 Décembre 2013 par Nenex