Sommaire

Les bulles d’aide

Les bulles d’aide sont devenues des éléments standards dans les sites web et notamment dans les interfaces d’administration des CMS.

Attention ce composant utilise du JavaScript, veillez à ce que les liaisons vers tous les fichiers soient bien implémentées. Reportez-vous au chapitre Installer Foundation, à la section Foundation complet - Les liaisons.

Par défaut les bulles d’aide apparaîtront sous le libellé à définir.

Le texte des bulles d’aide est placé dans un élément <span> avec la classe .has-tip. Le texte de la bulle d’aide est placé dans l’attribut title="Cras sem egestas pharetra adipiscing". Le contenu de l’élément <span> est le libellé à définir.

Voici un exemple simple :

<p>Lorem <span class="has-tip" data-tooltip data-disable-hover=’false’ aria-haspopup="true" tabindex=1 title="Cras sem egestas pharetra  
adipiscing">ipsum</span> duis mollis...</p>

Le fichier de cet exemple à télécharger est Chapitre 11 / 11-medias-e1.html.

Voici l’affichage initial obtenu :

images/C11-007.png

Voilà l’affichage au survol du texte à définir :

images/C11-008.png

Pour changer l’orientation de la bulle d’aide, utilisez ces classes dans l’élément <span> :

  • top pour un affichage en haut,

  • left pour un affichage à gauche,

  • right ...