Modifier l'apparence d'une infobulle avec attribut data-tip

Bonjour, j'aimerai savoir s'il est possible de rajouter un bout de code pour faire en sorte, comme sur les infos bulle classique, que celle personnalisé dont voici le code, pourrai suivre le curseur (n'importe ou sur la zone cliquable, car dans mon cas c'est une image (apparaitre juste en dessous du curseur).

Merci d'avance.

Voici le code que j'ai modifier à partir du tuto:
http://www.alsacreations.com/astuce/lire/1-comment-personnaliser-une-infobulle.html

feuille de style:

[data-tip] { /* on sélectionne l'attribut data-tip */
position: relative;
cursor: pointer;

/*border-bottom: 1px dotted #aaa;*/
}
[data-tip]:hover:after {
content: attr(data-tip); /* on récupère la valeur de l'attribut data-tip */
position: absolute;
top: -0.5em; left: 70px;
white-space: nowrap; /* no wrapping */
padding: 5px 10px;
background: #cb7abc;
color: #fff;
font-family: "Trebuchet MS", tahoma, arial;
z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
}

De plus, savez vous si on peux éviter internet exploreur inférieur à 8 d'afficher l'info bulle standart générer par Le texte alternatif (alt).

Merci à vous qui avez peut-être une solution.
Cordialement.

tonyvincennes a écrit :
j'aimerai savoir s'il est possible de rajouter un bout de code pour faire en sorte, comme sur les infos bulle classique, que celle personnalisé dont voici le code, pourrai suivre le curseur

Non, pas en CSS. Tu ne peux pas récupérer la position du pointeur de la souris en CSS, ou positionner un élément par rapport à cette position.
Ça peut par contre se faire en JavaScript (pas de manière simple, donc pour suivre cette piste il faut soit être développeur JavaScript, soit utiliser un script existant qui fait déjà précisément ce que tu souhaites obtenir).

Dans tous les cas, pour afficher un texte au survol d'une image je prendrais les deux problématiques suivantes en compte:
- Si on veut rendre l'information un tout petit peu accessible, mieux vaut la placer en contexte de l'image plutôt que dans un attribut non sémantique (data-machintruc). En HTML5 les éléments FIGURE et FIGCAPTION sont justement faits pour ça.
- Il faudra bien sûr penser à tous les cas de figure où il n'y a pas de pointeur de la souris (ou du touchpad): navigation au clavier, tablettes, smartphones, etc. Est-ce que ça reste utilisable et ergonomique? Faut-il prévoir un design ou un fonctionnement différent qui prenne mieux en compte la diversité des modes de consultation?

Merci pour cette réponse, en effet le data-machintruc, c'est super, mais pas adapté autre que avec notre bonne vielle souris que l'on dirige avec liberté !
Mais, comme par magie, IE inférieur à 9 ne l'aime pas beaucoup, et me fais apparaître un liseré bien moche qui gache tout...
Savez-vous comme je pourrai faire (par des commentaire conditionnelle par exemple) pour annulé le data-machin et remettre une info-bulle classique ?
Peut on l'exprimer ds la page HTML ? ou seulement dans une feuille de style à part spéciale IE ?
Je cherche juste à annulé le <abbr data-tip> si ie inf 9 ...pour faire apparaître l'info bulle avec title="IE = perte de temps"..
code:
<ul>
<li id="AVEC MACHIN DATA"><a href="#"><abbr data-tip="Plan de site"><img src="#" border="none" alt="Plan du site"></abbr></a></li>
<li id="SANS MACHIN DATA"><a href="#"><img src="#" border="none" alt="Mes Albums" title="Mes Albums"></a></li>
</ul>

Merci de votre aide !

toujours pas résolue, j'ai mis une classe conditionnel qui dit:

si IE inf à 9, alors supprimer <abbr data-tip> (ce que j'ai réussi comme ceci dans le html) :

<!--[if lte IE 7]> <abbr class="ie7 oldie" lang="fr"> <![endif]-->
<!--[if IE 8]> <abbr class="ie8 oldie" lang="fr"> <![endif]-->
<!--[if gt IE 8]><!--> <abbr lang="fr"> <!--<![endif]-->

concernant donc cette ligne de code:
<li id="ex"><a href="#"><abbr data-tip="blabla"><img src="img/albumV4.png" border="none" alt="blabla"></abbr></a></li>

et dans le css en bidouillant ceci (... ):

.oldie [data-tip]:hover:after { /*Pour IE6, IE7 et IE8*/
display: none;
background: none;
}


mais comment remettre l'infobulle classique sur mon <img> grâce à title="blabla" pour IE6, IE7 et IE8 ?

Est-ce possible ou bien comme précédemment cela nécessite du javascript ??
et désolé de mon manque de connaissance...