Infobulle avec affichage relatif

[Cædes]

Bonjour,

je ne parviens pas à me dépatouiller de l'affichage de mes infobulles. Et après avoir touché un peu à tout sans parvenir au résultat escompté, j'utilise ma dernière carte : vous o/

Voilà, je voudrais donc des infobulles (ça encore ça va) mais au survol de la souris, je souhaiterai que les informations n'apparaissent pas dans une "bulle" mais dans une fenêtre en-dessous, quelque soit l'infobulle sélectionné (ce serait pour présenter mes personnages prédéfinis via la page d'accueil). Un petit schéma :

Pour un résultat plus visible, le rendu serait le même que sur ce forum. Vous passez la souris sur les icons de Wanted People et hop, les informations apparaissent en-dessous =)

Merci d'avance à celle ou celui qui me sortira des ennuis o/

Edit : Oui, je pourrais utiliser un système d'onglet, mais ça va me faire un truc énorme (hébergement du script, et codage html en plus dans ma pa) alors que je sais qu'on peut le faire avec une simple infobulle ><

[Pakodar]

Bonjour,

Il est possible de changer la position avec:
top: -10px;
Celle-ci modifie la position de l'infobulle par rapport au haut de l'image
left: 10px; pour la position par rapport au bord gauche de l'image

[Cædes]

Bonjour Pakodar,

oui merci, je connais bien ce code, je sais bien qu'on peut modifier l'affichage de l'infobulle mais ce n'est pas ce que je cherche à faire. Si je modifie top & left dans mon css, chaque infobulle apparaitra, non pas comme je le souhaite, toujours au même endroit sous la rangée de mini-icone, mais selon l'endroit où se situe la flêche.

Dans mon image d'exemple, que ma souris soit sur la première icône ou l'avant dernière, l'infobulle s'affiche au même endroit : en dessous, dans le cadre. Tu vois ?

Mais merci quand même.

[Pakodar]

Re,
Vous pourriez aussi créer plusieurs codes infobulles, une pour chaque image.
ça vous semble possible?

[Cædes]

Vingt infobulles, donc vingt codes css différents à ajouter dans ma page html, donc une iframe à ajouter pour ne pas trop alourdir le codage déjà conséquent de ma page d'accueil... J'aimerai bien ne pas arriver à cette extrémité (même si j'avoue y avoir pensé pendant que je me tapais la tête sur mon clavier devant le problème 8D)

Je sais qu'il est possible de faire ce que je demande puisque j'ai un tutoriel en tête, lu il y a quelques semaines sur un site. Mais impossible de le retrouver =/

[Cædes]

Je relance, des fois que quelqu'un trouverait la réponse à ce petit problème =)

[Cædes]

Peut-être que quelqu'un peut m'aider ? =)

[tupac]

Bonjour

Il suffisait juste de rajouter un margin left a l'intérieur de l'infobulle entre les deux images.

Spoiler:

[Cædes]

Merci de votre proposition, mais je ne vois pas en quoi ça règle mon problème. L'infobulle se déplace toujours et n'apparait simplement en-dessous comme je le voudrais =/

[tupac]

Quelque soit l'infobulle choisi vous voulez que les informations apparaissent toujours au même endroit c'est bien ça?

[Cædes]

C'est tout à fait ça =)

[tupac]

et bien c'est ce que je vous est proposé!!!

[Cædes]

Absolument pas, l'infobulle continue de se déplacer selon l'icône sur lequel je passe la souris. Elle n'est pas placée définitivement. Elle se décale vers la droite à chaque choix d'icône. Ce qui coupe les informations sur ma page d'accueil. La preuve avec votre code directement :

Spoiler:

C'est exactement la même largeur du screen pour que vous vous rendiez bien compte mais même la longueur des flèches blanches prouve bien que ça n'est pas l'effet voulu =/

[tupac]

Vous voulez parler de ce petit décalage de 1 ou 2 min a chaque fois que l'on passe le curseur sur l'image mais c'est juste une question de réglage c'était a vous de les fignoler.

Bon j'ai refais les réglages mais il va falloir que vous les refassiez lorsque vous allez placer vos propres images.

Spoiler:

[Cædes]

Merci d'avoir pris le temps de m'aider Tupac, j'ai pu placé mes deux rangées d'infobulles comme je le désirais =)

[tupac]

De rien et comptant de voir que cela fonctionne