Forum

Bonjour, après quelques recherches, je n'ai malheureusement pas trouvé mon bonheur sur un topic déjà existant.

Je cherche à créer une bull popup, en gros, au passage de ma souris sur du texte ou une image bien définie, une bulle s'affiche automatiquement sans clic.

J'aimerais ensuite intégrer cela dans un Menu de contenu, dans une des colonnes de mon site.

J'ai les codes, seulement je ne sais pas exactement comment procéder.



Pour plus de précisions concernant les codes html / css à mettre en place, les voici : Bulle Popup



D'avance merci.

Bonjour,

Le principe est assez simple, cela utilise la propriété :hover en css.
Pour cela il faut que ton élément posséde un nom de class.

Le code css est à mettre dans un fichier css de ton thème. Soit un existant, soit un nouveau.

Il te reste ensuite à mettre ton code html dans un menu de contenu à l'endroit que tu souhaite.

ElenWii

Merci de ta réponse ElenWii.

Alors, à la base, avant de venir ici, j'ai fait exactement la manip que tu décris, pourtant ça ne fonctionnait pas.

Peut être faut-il mettre la partie css dans un *.css spécifique ?

Tu peux me montrer ce que tu as fait précisément ?

Bien entendu, dans un premier temps j'ai ajouté cette partie dans un css existant :



Ensuite dans un Menu de contenu j'y ai ajouté la partie html :



J'ai d'ailleurs essayer avec et sans les balise [html]

Voilà !

Dans quel fichier css exactement ?

Je te conseil le content.css

Mais ton code fonctionne regarde : Texte à survoler Texte à afficher au survol

je te conseil aussi d'ajouter le caractère ">" dans span.bulle:hover > span pour ne cibler que le premier span

J'ai changé de css et l'ai donc mis dans le content.css, et ça fonctionne sous Mozilla, merci !

Mais y'a un second soucis du coup, je tourne plutôt sous Opera, et là par contre le popup ne fonctionne pas, une idée ?

vide ton cache de navigateur.

Utilise la fonction "examiner l'element" pour verifier si le CSS est chargé ou pas.

ElenWii

Apparemment le css est chargé oui

Bonjour,

un lien vers la page pourrait peut être nous aidé pour le coup.

Cordialement, janus57

J'ai réussi à régler ce problème, et ça fonctionne maintenant sous Opera aussi.

Mais j'ai encore une chose à rajouter (Oui, régler un problème pour en engendrer un autre, désolé )



Tout d'abord voici mon site : SiteWeb



Le popup concerne le texte que l'on trouve dans la colonne gauche, il y a un exemple sur la première ligne "Ruines de Kel Voreth".

Lorsque l'on est sur la page principal, le popup apparait normalement.

Lorsque je vais sur le forum (Lien en haut du site), le popup est caché derrière et je n'ai pas réussi à le faire passer devant :s

(Vous risquez de ne pas le voir, car n'ayant pas les accès au forum, vous ne verrez pas tout)



Merci d'avance encore une fois !

Édité par Hiryue Le 09/06/2014 à 15h01

Si tu as un element qui passe devant, c'est un problème de z-index.

ajoute le code suivant dans ton css span.bulle:hover span :

ElenWii

So pro, merci ElenWii !

Je n'ai plus de problèmes, pour le moment

A bientôt !

Édité par Hiryue Le 09/06/2014 à 16h20