28172 sujets

CSS et mise en forme, CSS3

Infobulle : maitriser taille et sur quel élément.

Bonjour,

Comment faire pour permettre à la souris de se déplacer dans un title sans en sortir ?
Dans le but de mettre un lien dans le title.

Bonne journée
Administrateur
Bonjour,

l'attribut title se place sur un lien, pas sur une image.
Si tu veux présenter du contenu à tous (et là je pense très fort aux utilisateurs de clavier ... mais sur une tablette ou un smartphone, le survol d'une zone à la souris c'est pas leur fort non plus), ne le fait pas avec un @title, préfère un élément HTML classique genre span, div, p enfin ça dépend de ce que tu es en train de faire Smiley smile
Et style-le au survol ET au focus de la manière dont tu veux.

Quoique le fait de pas afficher de suite quelque chose va par principe poser problème sur tablette/mobile : certains utilisateurs de souris vont par hasard découvrir ton texte en bougeant la souris, les utilisateurs du clavier ont de bonnes chances d'arpenter tous les liens de la page un par un, mais on clique pas au hasard sur un smartphone/tablette par contre ...
Un super article sur ce genre de problème de conception : http://baymard.com/blog/trigger-indicators
J'ajouterai un clic plutard pour palier au survol.

Mais j'ai un souci avec mon CSS actuel.
Impossible de revoir la taille.
J'ai essayé avec une div et une table : nada.
Et ce je sais que certains y sont parvenu et ont même fait une bonne déco.

2eme chose :
Est-il possible de le passer sur autre chose que sur un <a> de manière à justement coller un ou plusieurs lien dans l'infobulle. Pour pouvoir 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
* {
   font-size: 11px; /* On définit les propriétés de texte pour toutes les balises. */
   font-family: Tahoma, Verdana, Arial, serif;
}
a.info {
   position: relative;
   color: black;
   text-decoration: none;
   border-bottom: 1px gray dotted; /* On souligne le texte. */
}
a.info span {
   display: none; /* On masque l'infobulle. */
}
a.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */
   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

   cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
   display: inline; /* On affiche l'infobulle. */
   position: absolute;

   white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

   top: -5px; /* On positionne notre infobulle. */
   left: -5px; /* -5 la rend navigable. */

   background: white;

   color: green;
   padding: 3px;

   border: 1px solid green;
   border-left: 4px solid green;
}
</style> 
</head>

<body>
<p>Grâce au <a href="#" class="info">Wi-Fi<span>contraction de Wireless Fidelity</span></a>, il est possible de créer des réseaux locaux sans fil à haut débit pour peu que la station à connecter ne soit pas trop distante par rapport au point d'accès. Dans la pratique, le <a href="#" class="info">Wi-Fi<span>contraction de Wireless Fidelity</span></a> permet de relier des ordinateurs portables, des « machines de bureau », des assistants personnels (<a href="#" class="info">PDA<span>Personal Digital Assistant</span></a>) ou tout type de périphérique entre eux grâce à une liaison haut débit (11 Mb/s ou supérieur) sur un rayon de plusieurs dizaines de mètres en intérieur (généralement, entre une vingtaine et une cinquantaine de mètres) à plusieurs centaines de mètres en environnement ouvert.</p>
</body>

</html>


Bonne journée
Modifié par westernz (31 May 2012 - 23:02)
Bonjour, <hs>!</hs>

Apparement tes liens serait des <abbr></abbr>, du coup, tu peut y imbriquer un lien.

Ta page n'a pas de doctype html5 et tes liens sont de toute façon dans un paragraphe ... pas moyen donc d'y glisser des balises de type block.

Tu peux donc faire (choix des balises libre):
<span class="abbr-info"><abbr>Wi-Fi</abbr><em class="info">contraction de Wireless Fidelity<a href="wikipedia"> Wikipédia</a></em></span>.

Le reste est une question de style.
position relatif pour span et absolu pour em en left:-9999px; , bordure, couleur, fond , etc ...

Il y a surement d'autres approches et alternatives avec ous sans js (si IE6 par exemple tu laisses em en static, etc ... )
Pour le width c'est réglé, je passe en width:400px même si l'info est très courte, tanpis. Sans nowarp.

Reste mon problème de le mettre sur autre qu'un <a> pour mettre un ou plusieurs <a> dedans

<abbr> ne peut pas marcher. Title ne permet pas la navigation dans la bulle pour aller y cliquer un lien. Et la bull est très lente à s'afficher.


voici mon code en état actuel:

<style type="text/css">
<!--

a.infobulle {
   position: relative;
   color: black;
   text-decoration: none;
}

a.infobulle span {
   display: none; /* On masque l'infobulle. */
}

a.infobulle:hover {
	background: none; /* Correction d'un bug d'Internet Explorer. */
	z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
}

a.infobulle:hover span {
   display: inline; /* On affiche l'infobulle. */
   position: absolute;
   width:400px;


   top: -5px; /* On positionne notre infobulle. */
   left: -5px;

   background: white;

   color: green;
   padding: 3px;
   

   border: 1px solid green;
   border-left: 4px solid green;
}
</style>




<a href='javascript:void()' class="infobulle" style="cursor:help;">
Mon texte affiché<span>mon texte après survol </span></a>

Modifié par westernz (01 Jun 2012 - 12:48)
<abbr tabindex="0"> </abbr>

abbr:focus {font-size:2em;}

et abbr s'integre alors dans le flux naturel de ta navigation au clavier et peut prendre le focus. (donc clique ou tab et peut-être stylé via :focus).
idem pour un span ou autre balise.

Cordialement,
GC
Il semble que j'y arrive.

Juste des souci de dimensions encore.
Mais je suppose que ca va être compliqué a résoudre :
- Contrairement aux title="" la div ne passe pas en overflow par dessus la fenetre d navigateur si elle est trop longue.
- Elle ne se repositionnement pas s'il n'y a pas assez de place à droite, alors qu'il y en a assez à gauche.
-Obligé de lui coller une taille fixe car le span tente d'avoir une taille minimal et tasse tout le texte, un min-width/max-width ne fonctionne donc pas.


Merci.
Bonne journée
Modifié par westernz (01 Jun 2012 - 15:17)
Sujet clos
Aller à