Mettre en place des info-bulles personnalisées sans JS

Mettre en place des info-bulles personnalisées sans JS

Html5, CSS3, Javascript Tutoriels

Depuis que les sélecteurs :before et :after sont compris par la majorité des navigateurs (mis à part les versions antérieures à IE9), il devient très intéressant de les utiliser. Et plus ça va, plus l’utilisation du Javascript devient un superflu dans beaucoup de cas.

Dans ce nouveau tutoriel, nous allons voir comment mettre en place facilement un système d’info-bulles personnalisées.

Le concept

Pour arriver à nos fins, nous allons agir sur deux fronts : l’usage d’un attribut data-tip dans notre Html pour stocker les messages de nos info-bulles, et quelques lignes de CSS pour designer et afficher ces dernières.

Partie Html

Nous allons simplement déclarer un attribut data-tip dans la balise adéquat. Dans notre exemple, nous allons affecter des infos-bulles à des balises span contenues dans un paragraphe.

<p>
  Lorem ipsum dolor <span data-tip="Nice Tooltip!">sit amet</span>, consectetur adipisicing elit, <span data-tip="Simply and easy to use!">sed do eiusmod</span> tempor incididunt ut labore et <span data-tip="No JS, only CSS">dolore</span> magna aliqua.
</p>

Partie CSS

Nos info-bulles étant positionnées en absolue, nous allons déclarer tous les éléments possédants un attributs data-tip en position relative :

[data-tip]{
  position: relative;
}

Nous allons maintenant positionner et designer nos info-bulles. Pour cela, nous allons faire appel au sélecteur :before pour afficher le message des infos-bulles et le sélecteur :after pour afficher un triangle représentant l’origine du message.

[data-tip]:hover:before{
  content: attr(data-tip);
  position: absolute;
  padding: 0 8px;
  height: 28px;
  line-height: 28px;
  background-color: rgba(0, 0, 0, 0.8);
  left: -10px;
  top: -38px;
  font-size: 14px;
  border-radius: 3px;
  white-space: nowrap;
  color: #fff;
  font-size: 11px;
}

[data-tip]:hover:after {
  content: "";
  position: absolute;
  border-top: 8px solid rgba(0, 0, 0, 0.8);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  left: 0;
  top: -10px;
}

Vous pouvez voir le résultat à la page suivante : http://codepen.io/Shakup/pen/kjuiE

Voilà une technique simple mais efficace pour embellir vos pages sans se prendre la tête en les surchargeant de Javascript.

A propos de l'auteur

Commentaires

  • GeekPress le 26/03/2013 à 14:22

    Pourquoi s'emmerder avec une couche de JS quand on peut faire cela en quelques lignes de CSS.

    En plus, ta méthode est valide IE8, que demande le peuple ? :)

  • Sébastien Decamme le 26/03/2013 à 17:10

    Des sous ? :)

  • Valentin de Geekeries le 11/04/2013 à 18:27

    Ah super bon ça !
    Je vais peut-être l'intégrer à la nouvelle version de geekeries !

  • sidi le 07/03/2014 à 17:46

    Bonjour à tous,

    Comment retourner la petite flèche un quart de tour merci

    je l'adopte super, mais je souhaite changer les disposition l'emplacement, j'ai réussis mais la petite flèche je souhaite la déplacer vers le coté gauche, à l'origine elle est orienté vers la vas , alors moi comme je préfère avoir le message à adroite du champs donc je souhaite tourner le petite flèche gauche Merci de votre réponse

  • Sébastien Decamme le 07/03/2014 à 17:49

    @sidi : il te suffit de jouer sur les bordures. Pour avoir une flèche orientée vers la gauche, voici le changement à faire :

    border-right: 8px solid rgba(0, 0, 0, 0.8);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;

  • fred le 26/03/2014 à 22:50

    c'est exactement ce que je cherche merci :)

    par contre une astuce pour mettre un texte sur deux lignes ?

    merci

* KeywordLuv ! Entrez VotreNom@VosMotsClés dans le champ "Nom" pour bénéficier d'un mot-clef ciblé.