Modifier l’apparence de vos balises title avec tooltipsy

Modifier-l-apparence-de-vos-balises-title-avec-tooltipsy

Aujourd’hui, on change un peu de sujet pour se concentrer sur un élément qui peut sembler être un détail mais qui peut vraiment apporter un plus à votre site : la modification « visuelle » de vos balises title sur vos sites web. Pour cela, nous devrons passer par un petit script jQuery que nous n’écrirons pas. Je vais simplement vous montrer comment l’utiliser, il s’agit de Tooltipsy.

Déjà, pour information, Tooltipsy est disponible sur ce site. Nous allons ensemble voir comment l’installer, l’appeler dans nos balises, et enfin comment y ajouter des options et modifier son style.

Si vous voulez des exemples d’utilisation, vous en avez sur les icônes sociales et RSS en haut à gauche voire même directement en allant sur le site de Tooltipsy.

Prêts ? Alors on y va !

Première chose, télécharger Tooltipsy, ça peut être utile. Si vous ne l’avez pas encore récupéré, il est disponible sur Github à cette adresse.

Ce que nous allons faire tout au long de ce petit tutoriel, c’est utiliser Tooltipsy dans une page html plus que basique : voila le code de base.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Essais tooltipsy</title>
    <link rel="stylesheet" href="style.css" />
    <!-- On importe jQuery depuis les serveurs de google -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!-- On importe notre script -->
    <script src="tooltipsy.min.js"></script>
  </head>
  <body>
    <p>Cliquez sur <a href="#" title="Ho, un lien ;-)">ce lien</a></p>
  </body>
</html>

Actuellement, le résultat de cette page devrait être relativement basique… Je ne pense pas qu’il y ait besoin de faire de capture d’écran cette fois-ci, vous voyez comment s’affiche le title par défaut normalement. Le résultat peut différer légèrement suivant votre navigateur et/ou votre système d’exploitation. Mais bon, on s’en fiche puisque nous allons redéfinir tout ça ! Et croyez-moi, ça sera la même chose partout pour le coup.

Bon, Tooltipsy, comment ça marche ? Première chose, appeler la fonction sur notre lien. Tout ce que nous allons faire, c’est donc ajouter une class à notre élément lien et appeler cette fonction dans un petit script à coté.

<p>Cliquez sur <a href="#" class="hastip" title="Ho, un lien ;-)">ce lien</a></p>
<script>$('.hastip').tooltipsy();</script>

Ouep, c’est tout ! Actualisez et là, vous devriez voir un léger changement (normalement). Votre title devrait apparaitre avec un léger fade-in au passage de la souris et s’afficher… en haut sans aucun style. Autant dire que jusque-là, l’intérêt de Tooltipsy est assez faible. Cela devient intéressant à partir du moment ou l’on peut commencer à styliser un peu cette balise title, chose qui, je le rappelle, est impossible en css puisque c’est le navigateur qui se charge lui même de l’affichage de cet attribut html.

Pour styliser notre élément, nous avons deux possibilités :
La première ? Passer par du css et personnaliser l’attribut .tooltipsy. Faisons le test et mettons y quelques lignes :

.tooltipsy {
    padding: 10px;
    max-width: 600px;
    color: #FFF;
    font-size: 12px;
    background-color: #464B56;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    text-shadow: none;
}

Et hop, le résultat (oui je sais, ça ressemble à ce qu’il y a sur ce site dans les icônes à gauche, j’ai repris le même code visuel.
La deuxième façon de faire, c’est de passer par du code javascript, voyez plutôt :

  $(document).ready(function(){
    $('.hastip').tooltipsy({
      css: {
          'padding': '10px',
          'max-width': '600px',
          'color': '#FFF',
          'font-size': '12px',
          'background-color': '#464B56',
          '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          'text-shadow': 'none'
      }
    });
  });

Et voila ! Actualisez, vous devriez voir le résultat directement, et logiquement il devrait-être identique que précédemment.

Bon, ça serait assez malheureux si j’avais écrit un papier uniquement pour vous présenter ça… Là, nous n’avons vu qu’une petite base qui reste assez sympathique mais qui est assez limitée… Passons donc à la vitesse supérieure avec la possibilité de positionner votre balise title ! Par défaut, comme vous le voyez, elle vient se mettre juste au dessus du texte, un peu gênant non ? Nous allons donc ajouter une petite propriété à notre code Javascript :

  $(document).ready(function(){
    $('.hastip').tooltipsy({
      offset: [0, 10],
      css: {
          'padding': '10px',
          'max-width': '600px',
          'color': '#FFF',
          'font-size': '12px',
          'background-color': '#464B56',
          '-moz-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          '-webkit-box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          'box-shadow': '0 0 10px rgba(0, 0, 0, .5)',
          'text-shadow': 'none'
      }
    });
  });

Ce paramètre (offset) va donc nous permettre de positionner notre champ avec deux valeurs numériques : left et top. Une valeur positive décalera notre bloc vers le bas/à droite, et des valeurs négatives permettront de le remonter/décaler vers la gauche. Enfantin non ? Avec ça, vous avez déjà je pense une bonne base pour faire des choses assez sympathiques.

Bien entendu, si ça s’arrêtait là, ce serait assez limité, sachez que si vous voulez passer des fonctions en paramètres c’est possible ! Notamment si vous voulez ajouter des effets visuels sur l’affichage de votre élément. L’intérêt n’était pas ici de vous montrer toutes les possibilités de l’outil, mais vous avez de quoi faire des choses sympathiques déjà. Ce que je peux vous conseiller si vous souhaitez approfondir, c’est d’aller directement sur le site voir les exemples disponibles. Après, c’est à vous de faire jouer votre imagination pour arriver à faire des choses sympathiques (évitez quand même d’en faire trop, c’est juste un outil).

Voila, j’espère vous avoir convaincu de l’intérêt de cette fonction très sympathique !


Télécharger les sources du tutoriel (4Ko)

Envie de partager cet article ? Google+

Date de sortie : 16 mai 2013
Auteur : Bardyl
Consultations : 2077
Commentaires : 0
Catégorie : Webdesign

Bardyl, une histoire de pousin.

Poussin de son état, Mathieu Menut (alias Bardyl ou Bardylette suivant les lieux) est un simple passionné du Web depuis de nombreuses années. Mathieu aime tout ce qui attrait au développement, au graphisme, référencement... Il s'intéresse à plus ou moins tout et prône la généralisation des 35 heures par jour.

Twitter : @Bardylette / web : menutmathieu.fr