HTML
CSS
boite_volante
Tooltip
Tooltip2
. . . . . La
boite volante
Ou ToolTip
Les précisions s'affiche ici.
est utile pour afficher des précissions.
Le code HTML <p class="inline">La <p class="info inline">boite volante<span><img class="callout" src="../../images/fleche.png" />Ou ToolTip<br>Les précisions s'affiche ici.</span></p> est utile pour afficher des précissions.</p> Le code CSS <style> p.inline{display:inline;} p.info{ position:relative; z-index:15; color:#000; text-decoration:none; border-bottom: 1px dotted black;} p.info:hover{z-index:16; background-color:#eee;} p.info span{display: none;border-radius:10px; box-shadow: 0px 0px 8px 4px #666;} p.info:hover span{ display:block; position:absolute; top:2em; left:2em; width:11em; border:1px solid #fff; padding:5px; background-color:#333; color:#fff; text-align: center} .callout {z-index:20;position:absolute;border:0;top:31px;left:67px;} </style>
Ou ToolTipOu ToolTip