Discussion :

[2michel]

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]

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]

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]

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]

Une seul chose: Merci

[popcorn]

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=&quot;infobulle&quot;>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]

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= &quot; infobulle &quot; > cela (en rouge) ne doit pas être présent dans ton code.

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

[popcorn]

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= &quot; infobulle &quot; > 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]

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]

oui simple ' mais directement dans la page de code.

Je ne peux pas plus je suis à fond.

[popcorn]

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.

[Valki]

Bonjour,

Pour information,

Préférer : display:none; et display:block;
à : visibility:hidden; qui n'est pas pris en compte sur tous les navigateurs.

[popcorn]

Bonjour,

Pour information,

Préférer : display:none; et display:block;
à : visibility:hidden; qui n'est pas pris en compte sur tous les navigateurs.

Merci pour l'info, très utile