blog test de simon

Mettre le titre de l'article avec l'infobulle dans la struture HTML .

<div id="menu_articles" class="menu_bloc bloc-cote" data-section="articles">
       
           <h2>Tutoriels</h2>
           <li><a href="/les-infobulles" class="tip" data-tip="tuto pour faire des infosbulles dans le menu">Les infosbulles</a></li>
           <li><a href=" /infos-bulle-texte" class="tip" data-tip="tuto pour faire des infosbulles dans un texte">infosbulles texte</a></li>
          
          </div>

________________________

Mettre dans le Css le code que vous pourrez modifier si besoin.


  /* Tooltip pour info-bulle*/



.tipr_content
{
     font: 13px/1.7 'Helvetica Neue', Helvetica, Arial, sans-serif;
     color: white;
     height:auto;
    background-image: linear-gradient(#058, #cf8);
     padding: 3px 17px;
      border-radius:10px;
     border:3px outset #eaa;
     color:#000;
      width:100%;
}
.tipr_container_bottom
{
     display: none;
     position: absolute;
     margin-top: 10px; /*décaler la bulle*/
     box-shadow: 2px 2px 5px #f9f9f9;
     z-index: 1000;
}
.tipr_container_top
{
     display: none;
     position: absolute;
     margin-top: -77px;
     box-shadow: 2px 2px 5px #f9f9f9;
     z-index: 1000;
}
.tipr_point_top, .tipr_point_bottom
{
     position: relative;
    background: #fff;
    border: 1px solid #dcdcdc;
}
.tipr_point_top:after, .tipr_point_top:before
{
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    top: 100%;
    content: "";
    height: 0;
    width: 0;
}
.tipr_point_top:after
{
    border-top-color: #fff;
    border-width: 8px;
    left: 50%;
    margin-left: -8px;
}
.tipr_point_top:before
{
    border-top-color: #dcdcdc;
    border-width: 9px;
    left: 50%;
    margin-left: -9px;
}
.tipr_point_bottom:after, .tipr_point_bottom:before
{
    position: absolute;
    pointer-events: none;
    border: solid transparent;
    bottom: 100%;
    content: "";
    height: 0;
    width: 0;
}
.tipr_point_bottom:after
{
    border-bottom-color: #fff;
    border-width: 8px;
    left: 50%;
    margin-left: -8px;
}
.tipr_point_bottom:before
{
    border-bottom-color: #dcdcdc;
    border-width: 9px;
    left: 50%;
    margin-left: -9px;
}


________________________

fichiers à mettre à la fin de la structure HTML ( voir plus bas )

_____________________

Il faut mettre ce fichier dans notepad++ et l'enregistrer en .js  puis le mettre dans la boite à fichiers. il suffira de prendre ensuite son adresse et la placer dans la structure HTML

<script src="https://static.blog4ever.com/ici le fichier .js"></script>