Info bulle personnalisé

[Sephi-Chan]

Ce n'était pas un problème quand tu utilisais de simples title. Dans ce cas, il ne faut pas utiliser l'attribut title (ou alors seulement pour la poignée de personne qui visitera ton site sans Javascript activé) et plutôt mettre ton infobulle riche dans le DOM.

<div class="element" title="…">

  <div class="tooltip">

    <img src="…" alt="…" />

    <h4>…</h4>

    <p>…</p>

  </div>

</div>

Ensuite, tu vires les attributes title avec Javascript pour ne pas être emmerdé. Profite-en également pour masquer les infobulles.

$(document).ready(function(){

  $('[title]').each(function(){

    $(this).removeAttr('title');

  });

  $('.element .tooltip').css('position', 'absolute').hide();

});

Puis tu affiche et positionne ton infobulle :

$(".element").mousemove(function(event){

  var $tooltip = $(this).find('.tooltip:first'),

      x = event.pageX,

      y = event.pageY;

  

  $tooltip.offset({ top: y, left: x});

});

Note qu'il y a un truc ou deux à fiare pour masquer l'éventuelle infobulle déjà afficher. Ou alors il faut plutôt passer par un clônage de l'élément et bouger l'élément clôné, etc. Enfin après c'est à toi de voir.



Sephi-Chan