28172 sujets

CSS et mise en forme, CSS3

[Résolu] Infobulle et div

bonjour à tous
dans mes pages php j'ai un div de cette façon:

<td>
       <div id="toto"></div>
</td>

avec un css:

#toto: before { 
    content: "- toto à la plage";
}

le truc tout bête

en mettant une infobulle cela donne:

<td>
       <span class="info"  id="toto"><span>Ca marche</span></span>
</td>


avec un css:

span.info
{
    position:relative;
    z-index:24; background-color:#ddd;
    color:#000;
    text-decoration:none
}
span.info:hover {
    z-index:25; 
    background-color:#ff0
    
}
span.info span{
    display: none
    
}

span.info:hover span
{
    display:block;
    position:absolute;
    top:2em; left:2em; width:10em;
    border:1px solid #0cf;
    background-color:#555; color:#fff;
}

cela marche très bien, mais je suis obligé de retoucher toutes mes pages. Est' il possible de mettre les span.info ainsi que "ça marche" dans #toto

merci d'avance pour vos réponses Smiley smile
Modérateur
Bonjour,

Je n'ai pas tout compris Smiley smile

Mais il me semble que si le texte est toujours le même, on peut s'en sortir avec les :before et :after de #toto.

Amicalement,
merci pour la réponse parsimonhi Smiley smile
oui c'est toujours le même texte. je suis assez nul en css, 'j' apprend j'ai changé tous les .info par #toto mais cela ne marche pas. peut tu m'expliquer un peut mieux?

et merci encore Smiley cligne
Modérateur
Bonjour,

Ci-dessous un exemple complet.

Dans cet exemple, je suppose que ce sont tous les <span> ayant la classe "info" qui doivent avoir une info-bulle avec le texte "Ça marche". L'info-bulle apparait quand on passe la souris sur l'un des <span>.

J'ai mis les <span> dans un tableau puisqu'il semble que c'était ce que tu voulais. Mais ils peuvent être n'importe où ailleurs.

Quand la souris est ailleurs, les info-bulles sont cachées.

Quand la souris passe sur l'un des <span>, l'info-bulle pour ce <span> apparait en dessous du <span>.

Pour que ça marche, les points importants sont :
1) les <span> doivent avoir un positionnement, via par exemple un "position:relative;" (ça ne change pas la position des <span>, ça dit juste qu'ils sont positionnés) de manière à pouvoir ensuite positionner les info-bulles par rapport à ces <span>
2) initialement, l'info-bulle doit avoir un "display:none;" pour être cachée
3) lors du hover sur un <span>, on change le display de son info-bulle avec par exemple un "display:block;" pour la faire apparaitre, et on lui donne une position par rapport à son <span> avec les propriétés css top ou bottom, et left ou right (ici, j'ai pris bottom et left). On lui donne ensuite le style qu'on veut (color, background, width, etc.)

Si toutes les info-bulles ont le même texte et le même positionnement par rapport à leur <span>, on n'a pas besoin d'utiliser les id des <span> (je rappelle qu'on ne peut pas avoir 2 éléments avec le même id dans une page). Il suffit d'utiliser leur classe.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* style initial du span */
span.info
{
	display:block;
	padding:1em;
	position:relative;
	background-color:#ddd;
}

/* style du span sur un hover */
span.info:hover
{
	background-color:#ff0
}

/* style initial de l'info-bulle */
span.info:after
{
	content:"Ça marche";
	display:none;
}

/* style de l'info-bulle sur un hover */
span.info:hover:after
{
	display:block;
	position:absolute;
	bottom:-1.5em;
	left:2em;
	width:10em;
	border:1px solid #0cf;
	background-color:#555;
	color:#fff;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<span class="info">Texte 1</span>
</td>
<td>
<span class="info">Texte 2</span>
</td>
</tr>
</table>
</body>
</html>

Amicalement,
Modifié par parsimonhi (20 Oct 2020 - 06:57)
Modérateur
Hello,
Tu peux aussi récupérer un contenu texte pour ton pseudo élément depuis un attribut de ta balise : 
<div toto="ça marche"></div>
<div toto="ça marche aussi"></div>
<div toto="et celui là aussi"></div>

div:before{
  content: attr(toto)
}
merci à tous les 2 de vos réponses mais je crois que je me suis mal expliqué ou j'ai pas compris vos explications Smiley confus
dans mes différentes pages j'ai:

            <td>
                <div id="toto"></div>
            </td>

que je ne veux pas toucher, mais à partir d'un fichier css pouvoir lui mettre une infobulle avec du texte

et encore merci de votre aide
Modérateur
Bonjour,

Tu n'as pas dû beaucoup essayer. Smiley smile

Tu prends le même css que celui que j'ai fourni précédemment et tu mets #toto à la place de span.info.
/* style initial du div */
#toto
{
	display:block;
	padding:1em;
	position:relative;
	background-color:#ddd;
}

/* style du div sur un hover */
#toto:hover
{
	background-color:#ff0
}

/* style initial de l'info-bulle */
#toto:after
{
	content:"Ça marche";
	display:none;
}

/* style de l'info-bulle sur un hover */
#toto:hover:after
{
	display:block;
	position:absolute;
    bottom:-1.5em;
    left:2em;
    width:10em;
    border:1px solid #0cf;
    background-color:#555;
    color:#fff;
}

Amicalement,
merci parsimonhi,
si j'ai beaucoup essayé, mais j'ai mis mon

<td>
     <div id="toto"></div>
</td>

et je vérifiais sur une autre page Smiley confus et en plus je fais ce site pour le fun juste pour faire travailler mes méninges donc je ne cherche pas la facilité Smiley lol

et encore merci parsimonhi
Sujet clos
Aller à