Script pour créer des infos bulles en CSS
Posté : mar. 20 déc. 2011 13:49
Bonjour,
Voici un tutoriel vous permettant de créer des infos bulles CSS sur votre site.
Dans le CSS principal de votre site, collez ceci :
a.tooltip em {
display:none;
}
a.tooltip:hover {
border: 0;
position: relative;
z-index: ;
text-decoration:none;
}
a.tooltip:hover em {
font-style: normal;
display: block;
position: absolute;
top: 15px;
left: -30px;
padding: 3px;
color: #000;
border: 2px solid #ff0000;
background: #256c73;
width:180px;
}
a.tooltip:hover em span {
position: absolute;
top: -13px;
left: 0px;
height: 0px;
width: 0px;
background: transparent url(image-infobulle.gif);
margin:0;
padding: 0;
border: 0;
}
Ensuite, sur les différentes pages de votre site, pour créer une info bulle, il vous suffit de mettre ceci :
a href="URL de renvoi" class="tooltip"Le texte du lien est iciemspan/spanLe texte de l'infobulle est ici/em/a
Voici un tutoriel vous permettant de créer des infos bulles CSS sur votre site.
Dans le CSS principal de votre site, collez ceci :
a.tooltip em {
display:none;
}
a.tooltip:hover {
border: 0;
position: relative;
z-index: ;
text-decoration:none;
}
a.tooltip:hover em {
font-style: normal;
display: block;
position: absolute;
top: 15px;
left: -30px;
padding: 3px;
color: #000;
border: 2px solid #ff0000;
background: #256c73;
width:180px;
}
a.tooltip:hover em span {
position: absolute;
top: -13px;
left: 0px;
height: 0px;
width: 0px;
background: transparent url(image-infobulle.gif);
margin:0;
padding: 0;
border: 0;
}
Ensuite, sur les différentes pages de votre site, pour créer une info bulle, il vous suffit de mettre ceci :
a href="URL de renvoi" class="tooltip"Le texte du lien est iciemspan/spanLe texte de l'infobulle est ici/em/a