infobulle CSS pour un texte simple et

Question

Je voudrais utiliser infobulle dans une page Web avec les contraintes suivantes:

• infobulle devrait travailler avec des textes simples, non seulement avec des ancres.
• Je ne veux pas utiliser javascript, seulement css.
• Je voudrais le faire fonctionner au moins dans Firefox et Internet Explorer.

Un candidat prometteur est le solution d'Eric Meyer, mais il utilise des ancres. Loadaverendreero solution utilise span pour le texte simple, mais cela ne fonctionne pas dans Internet Explorer.

Je cherche un exemple de code de travail ou un lien vers une solution avec les paramètres ci-dessus.

Answer 1

Comme d'autres l'ont dit, vos besoins ne sont pas réalistes . Dans les environnements où Javascript peut être désactivé, j'utilise généralement l'attribut title pour obtenir des infobulles de navigateur simples comme solution de repli, puis pour activer de meilleures infobulles via Javascript en lisant les attributs de titre (en utilisant un framework tel que jQuery ou Mootools).

Exemple de code pourrait être quelque chose comme (en utilisant Mootools et l'addon Tips):

<script type="text/javascript"> 
window.addEvent('domready', function() { 
    // Enable the most basic default tooltips 
    var tooltips = new Tips('.tips'); 
} 
</script> 

<p>This is some example text in <abbr class="tips" title="Hypertext Markup Language">HTML</abbr> with some <a href="#" class="tips" title="Tooltips are useful tools">tooltips</a> applied to some of it.</p> 

Answer 2

Une solution qui répond à toutes vos exigences n'est pas possible. Le respect d'IE pour :hover est limité - La solution d'Eric Meyer fonctionne dans IE car elle utilise des ancres. Si vous voulez que cela fonctionne sur n'importe quel élément ET travaillez dans IE, vous devez utiliser JS.

Answer 3

Je crains que cela ne fonctionne pas dans vos contraintes. Internet Explorer 6 et précédent ne détecte planer sur un point d'ancrage, de sorte que vous devez déposer une exigence pour que cela fonctionne, que ce soit:

• n'a qu'à travailler dans IE7 et plus récent (dans ce cas, la solution de Loadaveragezero fonctionnera)
• peut utiliser des ancres (dans ce cas, la solution d'Eric fonctionnera)
• peut utiliser Javascript (dans ce cas, il y a manyways pour obtenir en vol stationnaire pré-IE7)