Retourner à la page d'accueil de TJS

Script infobulle : Script info-bulle minimal

Exemple du script info-bulle du livre, avec les fonctionnalités minimales
Partie II : L'interactivité / Chapitre 12 : Manipuler le document / Page 182

Exécution du script

Emulation de la console

Code source

<html><head><style type="text/css">body {  height:300px;    }.definition {  border-bottom:1px dashed #999;    }.infobulle {  cursor: help;}div.infobulleJS {  position:absolute;  padding:3px;  margin:0px;  border:1px solid #000;  background: #ccc;  color:#000;  box-shadow: 3px 3px 3px #000;  max-width:200px;}/* Ajout de la flè;che sur l'infobulle */div.infobulleJS::before {  position:absolute;  bottom:100%;  left:30px;  content:" ";  border-width:8px;  margin-left:-16px;  border-style:solid;  border-color:transparent;  border-bottom-color:#000;}div.infobulleJS::after {  position:absolute;  bottom:100%;  left:30px;  margin-left:-15px;  content:" ";  border-width:7px;  border-style:solid;  border-color:transparent;  border-bottom-color:#ccc;}.infobulleAnimateIn {  animation: infobulleAnimateIn 0.5s 1;}@keyframes infobulleAnimateIn {  from {     opacity: 0;     margin: 30px 0px 0px 0px;    }  to   {     margin-bottom:0px 0px 0px 0px;    opacity: 1;   }}.infobulleAnimateOut {  animation: infobulleAnimateOut 0.5s 1;}@keyframes infobulleAnimateOut {  from {     opacity: 1;     margin: 0px 0px 0px 0px;    }  to   {     margin-bottom:30px 0px 0px 0px;    opacity: 0;   }}</style><title>Exemple complet du chapitre Manipulation du document</title><script type="text/javascript">document.addEventListener("readystatechange", function(evt) {  if (document.readyState=="interactive") {    /* Trouver et parcourir tous les éléments de classe infobulle */    var elts=document.getElementsByClassName("infobulle");    for (var i=0; i<elts.length; i++) {      elts[i].dataset.bulleId="";      /* Transformer l'attribut title en dataset title */      elts[i].dataset.title=elts[i].getAttribute("title");      elts[i].setAttribute("title", "");      /* Ajouter le gestionnaire d'événement sur le mouseenter */        elts[i].addEventListener("mouseenter", showBulle);      /* Ajouter le gestionnaire d'événement sur le mouseleave */        elts[i].addEventListener("mouseleave", hideBulle);    }  }});    /* Fonction de création et d'affichage d'une infobulle */  function showBulle(evt) {  var elt=evt.target;  /* Création de la bulle si elle n'existe pas déjà */  if (elt.dataset.bulleId!="") {    return false;  }  var bulle=document.createElement("div");  var id="IB"+new Date().getTime();  bulle.setAttribute("id", id);  bulle.className="infobulleJS infobulleAnimateIn";  bulle.innerHTML=elt.dataset.title;  /* Positionnement de la bulle */  var rect=elt.getBoundingClientRect();  bulle.style.top=rect.top+rect.height+5;  bulle.style.left=rect.left+Math.round(rect.width/2);  /* Enregistrement de l'id de la bulle dans dataset */  elt.dataset.bulleId=id;  /* Ajout de la bulle sur le document */  document.body.appendChild(bulle);} /* Fonction de suppression d'une infobulle */  function hideBulle(evt) {  var bulle=document.getElementById(evt.target.dataset.bulleId);  var elt=evt.target;  bulle.className="infobulleJS infobulleAnimateOut";  setTimeout(function() {    document.body.removeChild(bulle);    elt.dataset.bulleId="";  }, 400);}    </script></head><body>  <h1 id="monH1" class="titre">Affichage d'info-bulles</h1>  <p>Qu'est-ce qu'une <span class="infobulle definition" title="Message d'information qui apparaît au survol de la souris. Le nom bulle vient de l'univers de la bande dessinée.">info-bulle</span> ?</p>  <p>On peut en mettre partout <span class="infobulle definition" title="Une autre bulle">info-bulle 2 </span> et même <span class="infobulle definition" title="Encore une autre bulle">beaucoup</span> ?</p></body></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 24/08/2019 04:37:50 sur php7 en 38.51 ms