blog test de simon

Les infobulles

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>

 

 

infobulle.PNG


________________________

 

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 )


  <script src="https://static.blog4ever.-- adresse du fichier js --"></script>

  <script>
$(document).ready(function() {
     $('.tip').tipr();
});
</script>


_____________________

 

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>

 

(function($){$.fn.tipr=function(options){var set=$.extend({'speed':200,'mode':'bottom'},options);return this.each(function(){var tipr_cont='.tipr_container_'+set.mode;$(this).hover(function()
{var d_m=set.mode;if($(this).attr('data-mode'))
{d_m=$(this).attr('data-mode')
tipr_cont='.tipr_container_'+d_m;}
var out='<div class="tipr_container_'+d_m+'"><div class="tipr_point_'+d_m+'"><div class="tipr_content">'+$(this).attr('data-tip')+'</div></div></div>';$(this).append(out);var w_t=$(tipr_cont).outerWidth();var w_e=$(this).width();var m_l=(w_e / 2)-(w_t / 2);$(tipr_cont).css('margin-left',m_l+'px');$(this).removeAttr('title alt');$(tipr_cont).fadeIn(set.speed);},function()
{$(tipr_cont).remove();});});};})(jQuery);





15/12/2016
2 Poster un commentaire

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 19 autres membres