Des info bulles avec TinyTips et JQuery

Le plugin de Mike Merritt TinyTips utilise la bibliothèque JQuery pour vous permettre d’afficher des infobulles au survol d’un lien.
Parce que ce code utilise l’attribut title des éléments de lien, on retrouve le principe du web sémantique.
Nul besoin de rajouter un élément précédent le lien auquel css devra donner l’effet d’infobulle.

Déclaration HTML

<img class="tTip" src="images/demo-image.jpg" title="Look at me" />
<a class="tTip" href="#" title="using the title">...</a>
<a class="imgTip" href="#">...</a>, 
<a class="tTip" href="#" title="really long one ...">...</a>

Coté scripts

On commence par déclarer la bibliothèque jquery puis le plugin dans le head .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinyTips.js"></script>

Mise en pratique, on génère les infos bulles via la méthode tinyTips en javascript. On peut soit utiliser l’attribut title des éléments soit générer nous-même le contenu.

$(document).ready(function() {
	$('a.tTip').tinyTips();
	$('a.imgTip').tinyTips('<img src="images/demo-image.jpg" /><br />You can even put images or any other markup in the tooltips.', 'yellow');
	$('img.tTip').tinyTips('title', 'green');
	$('h1.tagline').tinyTips('tinyTips are totally awesome!', 'blue');
});

5 commentaires à “Des info bulles avec TinyTips et JQuery

  1. Lolo

    Hello,

    Cela ne semble pas marcher à tous les coups.
    En utilisant la démo et IE9, de temps en temps, en fonction de la vitesse à laquelle on arrive sur le lien, la balise Title en mode classique peut s’afficher.

    Sur Firefox 17.0, c’est une autre histoire, je peux avoir des sortes de clignotements de l’infobull, qui continue tant que je ne bouge pas la souris.
    Idem sur Chrome, mais les clignotements sont beaucoup plus rapides.

    Suis-je le seul à avoir ce type de problème ?

    Lolo

    1. Rodolphe

      Bonjour,
      je ne rencontre pas ces problèmes avec IE9 ou firefox 17. Ca ne vous fait ça qu’avec la demo ou d’autres sites semblent avoir des problèmes?
      Je pense à une mise à jour éventuelle de plugins.
      Je suis preneur d’autre retours.

  2. Lolo

    Je n’ai testé que la démo.
    Pour reproduire le problème sur IE9, c’est facile.

    Pointez sur l’espace entre les 2 mots du lien « tristique eleifend », en arrivant par le haut.

    1. Rodolphe

      En effet, ça le fait même sur tous les liens du moment où on pointe la souris exactement sous le triangle de l’info bulle.
      Le script le prévoit ainsi, surement afin d’éviter que l’infobulle ne soit caché par la souris.

      if (winCheckY >= 0) {

      // If the tooltip should be on top
      var arrowPosX = (tipX / 2) – (arrowX / 2);
      var arrowPosY = tipY;

      var finalPosX = (targetPosX + (targetX / 2)) – (tipX / 2);
      var finalPosY = targetPosY – (tipY + 3);

      $(‘#tinytip #tiparrow’).css({top: arrowPosY+’px’, left: arrowPosX+’px’});
      $(‘#tinytip’).hide().css({top: finalPosY+’px’, left: finalPosX+’px’});
      $(‘#tinytip’).fadeIn(400);

      } else if (winCheckY <= 0) { // If the tooltip should be on bottom var arrowPosX = (tipX / 2) - (arrowX / 2); var arrowPosY = -14; var finalPosX = (targetPosX + (targetX / 2)) - (tipX / 2); var finalPosY = (targetPosY + targetY) + (tipY - 11); $('#tinytip #tiparrow').css({ top: arrowPosY+'px', left: arrowPosX+'px', 'border-color': 'transparent transparent #e2e2e2 transparent' }); $('#tinytip').hide().css({top: finalPosY+'px', left: finalPosX+'px'}); $('#tinytip').fadeIn(400);

  3. Lolo

    😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *