Bonjour à tous,
Je suis débutant et je viens de suivre un tuto pour créer des infobulles avec jQuery.
Je l'ai adapté en ce qui concerne le html et le css, par contre je bloque pour modifier le jQuery, langage que je ne connais pas du tout.
Et j'espère que vous pourrez m'aider à obtenir ce que je souhaite.
Le tuto en question est celui-ci :
http://www.grafikart.fr/tutoriels/jquery/infobulle-jquery-95
Le code que j'obtiens après avoir adapté à mes span class (au lieu des liens) est ceci :
[code]$(function(){
$(".infobulle").mouseover(function(){
if($(this).attr("title")=="") return false;
$("body").append('<span class="infobulle-content"></span>');
var bulle = $(".infobulle-content:last");
bulle.append($(this).attr("title"));
$(this).attr("title","");
var posTop = $(this).offset().top-$(this).height();
var posLeft = $(this).offset().left+$(this).width()/2-bulle.width()/2;
bulle.css({
left:posLeft,
top:posTop-10,
opacity:0
});
bulle.animate({
top:posTop,
opacity:0.99
});
});
$(".infobulle").mouseout(function(){
var bulle = $(".infobulle-content:last");
$(this).attr("title", bulle.text());
bulle.animate(
{
top:bulle.offset().top+10,
opacity:0
},
500,
"linear",
function(){
bulle.remove();
}
);
});
});[/code]
(j'ai remis toutes les valeurs de position comme dans le tuto car mes tests se sont révélés infructueux :-/ )
Actuellement, l'infobulle glisse de haut en bas de 10px pour arriver au dessus du lien.
Ce que je souhaiterais, c'est un glissement de 10px de la gauche vers la droite, mais ceci sous mon lien. Et toujours une bulle qui arrive centrée horizontalement par rapport au lien. Ma bulle pourra comporter plusieurs lignes, il faudrait donc la positionner par rapport au haut de celle-ci.
Et je trouve que la fonction est trop réactive, à peine on bouge le curseur sur le lien, que l'animation se répète plusieurs fois, ça donne un effet bugué. Est-il possible de maintenir la bulle en place 2s, et si on place le curseur sur la bulle (mouseover), qu'elle ne bouge plus jusqu'à ce qu'on enlève le curseur (mouseout).
Je sais que j'en demande beaucoup, et merci à ceux qui pourront m'apporter leurs connaissances.
jo.
jo___