[Résolu] Bulles

Bonjour à tous
J'ai besoin d'avoir des bulles qui s'affichent au survol (ou sur touchend pour les mobiles) sur certains textes.
Les textes sont dans des <span>, les bulles sont des <aside> avec les propriétés suivantes:

span.note {position:relative;... }
aside.footnote{display:none;position:absolute;...}
.note.active aside.footnote{display:table;}

<span class="note">texte<aside class="footnote">......</aside></span>

Le mécanisme est géré par un script qui met ou enlève la classe "active". Ce mécanisme est là pour qu'il y ait un seul élément "active" dans la page et éviter que les menus déroulants et autre éléments de ce genre se télescopent entre eux.
Si je ne mets pas de "left" dans les propriétés de la bulle, elle se positionne à gauche, non pas de la balise <span>, mais de la balise <p> qui l'englobe.
.
SI je mets un "left:0", ça se positionne sur la gauche de la balise <span>.et ça devient très étroit:


Questions:
1) je ne comprends pas ce fonctionnement: je pensais que left:0 était pris par défaut
2) j'aimerais que la bulle soit centrée dans la balise <p>, qui prend par défaut toute la largeur de son conteneur et prenne une largeur "convenable", sans avoir de problème liés à la position du <span> dans la ligne ni à la largeur de ce texte, généralement très court.
Disons que la largeur de la première image me semble convenable, mais j'aimerais centrer la bulle dans la balise <p>

Comment faire?

Merci de votre aide
Modifié par PapyJP (02 Feb 2017 - 17:51)

Merci de ta réponse.

J'ai été effectivement surpris que <span> ...<aside>...</aside></span> ait l'air de fonctionner, je me demande si le fait que ça marche ne soit pas un bug de FF, qui m'arrange bien, mais ça risque fort de ne pas marcher avec un autre navigateur, ou une version ultérieure de FF.
Par ailleurs on ne peut pas mettre un <aside> dans un <p>: la seule apparition de <aside> dans un <p> clôt le <p>.
Tout cela se trouve dans une balise <main> qui est en relatif, c'est donc par rapport à cette balise qu'il va falloir positionner la bulle.

Franchement faire un script qui travaille en calculant la position du <span>, je trouve ça plutôt lourd. Quelqu'un aurait il une proposition de design plus élégant? à base de CSS si possible?

bonsoir, en effet dans ff(mon mien, ça ne marche pas) , aside (un élément de type block pouvant contenir d'autre block ou du texte) est zappé. un span n'est censé contenir que du texte ou élément en ligne. Peut-être vaut-il mieux imbriqué 2 span.

Pour le css , tu peut centré un élément en absolu avec margin : auto; pour cela , il lui faut 2 coordonnées opposées à 0 ou plus (référent au parent dans lequel tu veut qu'il soit centré), selon que tu souhaite réduire son espace d'affichage , max-width peut aussi avoir son utilité.

ton code pourrait-être réecrit comme suit:

span.note {/* cursor:pointer*/ }
span.footnote{display:none;position:absolute;
/* valeur à regler selon tes besoins */left:0;right:0;max-width:15em;
 margin:auto;/* sauf si une seule coordonnée est gerer via js*/}
.note.active span.footnote{display:table;}

<span class="note">texte<span class="footnote">......</span></span>

span span !
Modifié par gcyrillus (02 Feb 2017 - 23:41)

Merci de vos réponses
Il est trop tard ce soir pour que fasse d'autres tests.
Pourquoi j'ai mis un <aside> et non un <span>? parce que j'ai des dizaines de "notes de bas de page" de ce genre, et que je ne tiens pas à limiter leur contenu à ce que peut contenir un <span>.
Si je mets la "note" en inline-block (ce qui était mon premier essai) il n'en tient pas compte, et du reste ça ne change rien au fait que je suis amené à mettre un <aside> dans un <span>.
En fait on tombe sur l'héritage du HTML des origines, antérieur avec ce que le CSS permet de faire, c'est à dire dire que la valeur du display n'est pas obligatoirement la valeur par défaut, mais d'une certaine façon le nom de la balise porte en soi des caractéristiques qui demeurent quel que soit le CSS qu'on leur attache.

Reprenons le problème à la base:
1) comme vous pouvez le voir sur les images que j'ai mises dans le premier message de ce fil, j'ai du texte "fluide" qui contient des références à des notes en bas de page.
2) plutôt que d'envoyer le lecteur en bas de la page par un <a href="#footnote2"> avec la nécessité de remonter pour poursuivre la lecture, je trouve préférable que le texte de la note de bas de page s'affiche au dessous de l'appel à cette note lorsqu'on survole cet appel.

La question est "comment faire", sachant que ce que à quoi j'ai pensé n'a pas l'air de marcher. Le nom des balises n'a aucune importance si ça marche.

Sinon je vais être amené à écrire du JS comme au bon vieux temps, à savoir attacher la bulle au <body> et calculer par JS à quel endroit la mettre. Compte tenu des problèmes de compatibilité des navigateurs, ce n'est pas forcément très pratique à coder. Je dois bien avoir dans un coin un vieux site où j'ai fait ça.

Note: en fait je n'écris pas en dur

<span>...<aside>...</aside></span>

C'est un script qui travaille sur le DOM et qui crée un clone de la note de bas de page et l'ajoute au contenu du span. Je suppose que c'est pour cela que ça donne l'impression de fonctionner.

Bonjour à tous

La nuit portant conseil, j'ai trouvé une solution de contournement très simple; au lieu de mettre le clone de la note dans le <span>, je l'insère après le <p> dans lequel se trouve le <span>. Cela évite de calculer la position par JS.
Bien entendu il est préférable que l'appel de la note soit proche de la fin du <p>, mais c'est très généralement le cas.
En suivant les recommandations de gcyrillus je n'ai pas eu de mal à styler le <aside class="footnote"> pour obtenir le centrage désiré.

Merci de m'avoir aidé dans mes réflexions.
Modifié par PapyJP (03 Feb 2017 - 10:00)