• test info-bulle OK 20170830

    Inspiré de :
    http://outils-web.fr/des-tooltips-info-bulles-en-css3-3-methodes-simples/

    adapté par tâtonnement pour EB :

    • remplacement de .tooltip (déja untilisé par EB) par .infobulle
    • mettre le message dans un attribut data-bulle au lieu de title

     

    Exemple d'utilisation ci-dessous

    Tooltip CSS3 final

    Un autre exemple d'utilisation ci-dessous

     

    Tooltip2 autre

     

     

     

     


     

    LE CSS:

     

    <style><!--
    .infobulle {
    display: inline;
    position: relative;
    }
     /* le corps de la bulle */
    .infobulle:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(data-bulle);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
    }
     /* facultatif une pointe vers l'appel de la bulle */
    .infobulle:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
    }
    --></style>

     

     

     


     

    LE HTML:

     <p><a class="infobulle" href="#xyz" data-bulle="ici le message de la bulle">texte affichant la bulle au survol</a></p>

     

★ BLOG TEST simulant le hors ligne (contenu masqué aux visiteurs seulement). Cela lève le doute sur une éventuelle suppression, conserve la gestion des favoris chez les visiteurs ainsi que les référencements des moteurs de recherche, ★ source du code > http://mbnoutils.eklablog.com