CSS Tooltips

Le
Zouplaz
Bonjour, je tente d'utiliser des tooltips purement CSS de la manière
suivante :

a.tooltip span { display: none; position:relative; position:relative;
top:-30%; border:1px solid #000000; background:#FFFFFF; color:#FF;
padding:2px 3px; margin-left:0px; width:100%; font-size:9pt }
a.tooltip:hover span { display:block; z-index: 1; opacity:0.8}

Ca fonctionne bien à ceci près que lorsque le tooltip apparait, il
'chasse' le texte qui se trouve au dessous

Le html correspondant est celui ci :

<div class="toile">

<a href="/uploads/gallery/412.jpg" class="tooltip" rel="lightbox"
title="TITRE&#013;146X114&#013;Huile sur toile / Oil on
canvas&#013;"><img alt="412-small"
src="/uploads/gallery/412-small.jpg?1149783651" />
<span>TITRE&#013;146X114&#013;Huile sur toile / Oil on
canvas&#013;</span></a>

<div class="title">"START ME UP"</div>
</div>



Quelqu'un a une idée de la cause ?

Merci d'avance
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22068041
Le 10/1/08 12:58 PM, Zouplaz a écrit :
Bonjour, je tente d'utiliser des tooltips purement CSS


(...)
Ca fonctionne bien à ceci près que lorsque le tooltip apparait, il
'chasse' le texte qui se trouve au dessous


(...)
Quelqu'un a une idée de la cause ?



mettre le tooltip en absolute au lieu de relative
et donner un positionnement au A


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Stephane Moriaux">
<meta name="License"
content="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.fr">
<title>tool tip mini</title>
<style type="text/css">
a.tooltip { position: relative; }
a.tooltip span {
display: none; position: absolute;
top: 0; left: 0; width: 100%; padding:2px 3px;
border:1px solid #000; background:#FFF; color:#FF;
/*margin-left:0px;*/
font-size:9pt
}
a.tooltip:hover span { display:block; z-index: 100; opacity:0.8}
</style>
</head>
<body>
<div class="toile">
<p>title="TITRE&#013;146X114&#013;Huile sur toile / Oil on canvas&#013;"
<span>
TITRE&#013;146X114&#013;Huile sur toile / Oil on canvas&#013;
</span>
</a>
</p>
<div class="title">"START ME UP"</div><br>
Testé Fx 3.<br>
Le "title" est viré du A
car met un peu la zone avec le tooltip chez moi.
</div>
</body>
</html>


--
sm
Zouplaz
Le #22067951
le 01/10/2008 13:38, SAM nous a dit:
Le 10/1/08 12:58 PM, Zouplaz a écrit :
Bonjour, je tente d'utiliser des tooltips purement CSS


(...)
Ca fonctionne bien à ceci près que lorsque le tooltip apparait, il
'chasse' le texte qui se trouve au dessous


(...)
Quelqu'un a une idée de la cause ?



mettre le tooltip en absolute au lieu de relative
et donner un positionnement au A





Merci, je teste demain - Si ça fonctionne pas j'opterai pour un script
javascript
Publicité
Poster une réponse
Anonyme