Script info bulle

**2michel** · 07/10/2008, 20h57

Bonjour,

J'ai une long texte (histoire), afin de l'agrémenter il y des liens qui ouvre sur des info bulles.
Dans ces info bulles il y aura des photos (500px) et leurs légendes.

Afin que ce soit agréable il faudrait que l'info bulle reste toujours à l'intérieur du cadre.

Je recherche donc, un script info bulle qui peut afficher des images et du texte Et surtout que; quelque soit la position du lien, la bulle ne sort pas du cadre de la fenêtre.

Merci de m'indiquer un lien.

Michel

**SpaceFrog** · 08/10/2008, 08h40

il y' en a plein les contributions ...

et ce sujet à été maintes fois abordé sur le form et nombre de liens vers des librairies intéressantes ont déja été données ...

Merci de faire un minimum de recherches avant de poster ce genre de demande ...

**2michel** · 08/10/2008, 10h17

Bonjour,

Crois moi, j'ai recherché et écumé les sites,

J'ai trouvé beaucoup de script, un seul si rapproche et je n'arrive pas à l'adapter.

Je rappelle ma recherche; une info bulle qui puisse afficher des images et texte et qu'elle se cadre automatiquement à l'intérieur de la fenêtre du navigateur.

Me pas hésiter de m'indiquer des liens.

Merci

Michel

**SpaceFrog** · 08/10/2008, 12h12

juste un tip

infobulle se dit tooltip

et google te donne des choses intéressantes ..

en particulier un lien vers l'excellent site walterzorn
http://www.walterzorn.com/tooltip/tooltip_e.htm

**2michel** · 08/10/2008, 17h55

Une seul chose: Merci

**popcorn** · 08/10/2008, 18h27

Bonjour,

J'ai regardé ce code et je ne suis pas arrivé à incorporer ma class.

Sans ma class, ça marche, mais j'aimerai pouvoir définir mon format.

Ais-je fait quelque chose de pas correct?

.infobulle{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #FFFFCC;
}
....

<div id="tip1"> test2 <span onmouseover="Tip('<div class="infobulle">Text of tooltip number one</div>')" onmouseout="UnTip()" >?</span>

Désolé 2michel de me meler de ce sujet, mais peut-être que tu rencontres aussi le même problème

Merci

**2michel** · 08/10/2008, 18h59

Il aurai mieux fallu que tu ouvre un autre post car cela "embrouille un peu la recherche".

Bref tu es là

je ne comprend pas grand chose en JS mais class= " infobulle " > cela (en rouge) ne doit pas être présent dans ton code.

Je ne peux rien te dire de plus désolé.

**popcorn** · 08/10/2008, 19h04

Envoyé par 2michel

Il aurai mieux fallu que tu ouvre un autre post car cela "embrouille un peu la recherche".

Bref tu es là

je ne comprend pas grand chose en JS mais class= " infobulle " > cela (en rouge) ne doit pas être présent dans ton code.

Je ne peux rien te dire de plus désolé.

Disons que dans le site référé par ce poste, on indiquait que c'était la façon d'entrer les simples guillements.

Merci

**Bovino** · 08/10/2008, 19h13

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.infobulle{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #FFFFCC;
}

Essaye en enlevant le visibility:hidden;

**2michel** · 08/10/2008, 19h16

oui simple ' mais directement dans la page de code.

Je ne peux pas plus je suis à fond.

**popcorn** · 08/10/2008, 19h18

Finalement, j’ai enlevé position absolute et visibility hidden et ça marche, merci beaucoup de votre aide.
Donc deux résolus dans le même sujet, il faut le faire.