Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP CSS Tooltips

CSS Tooltips

3 réponses
Avatar
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
Signaler un problème avec ce contenu

3 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
SAM
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;"
<a href="/uploads/gallery/412.jpg" class="tooltip" rel="lightbox" >
<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>
</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
Avatar
Zouplaz
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
Avatar
prac
Bonsoir

Un exemple de tooltips ici

http://winemap.googlepages.com/maps-lavaux-unesco.htm

(le titre : LAvaux Vignoble en terrasses)



--

http://philippe.chappuis.googlepages.com/using-google-page-creator

http://sites.google.com/site/annuairevin

--