Info bulle personnalisé

[Argorate]

Salutation!

Je suis entrain, ou plutôt j'ai terminé de faire ma petite fonction (utilisant jquery... si, si Sephi, j'te jure! - merci Anthor au passage), pour afficher un div personnalisé, plus jolie qu'une simple info-bulle.

Mon problème est le suivant, j'utilise jquery pour déclencher ma fonction quand je fais un onmouseover d'un élément du DOM possédant un title="...", et j'affiche le contenu de celui-ci dans mon div. Jusque là, tout est ok, mais le truc c'est que l'info-bulle de base, elle, est toujours là et s'affiche par dessus la mienne qui plus est !

Le z-index ne permet pas de passer pas de cheater en passant par dessus et je ne pense pas qu'on puise désactiver les info-bulle du navigateur, si?

Donc, avez-vous une idée de solution pour pallier à mon problème?

[Sephi-Chan]

Montre nous ton code Javascript.
Je pense qu'un event.preventDefault() suffit.


Sephi-Chan

[Anthor]

Si tu avais énoncé le problème de cette façon, je t'aurais pointé directement sur un plugin fait pour ^^

Sinon, il te faut lorsque tu affiches, prendre l'attribut title et le mettre ailleurs, et le remettre en place lorsque tu n'affiches plus.

[Argorate]

Je viens de changer pour un onmousemove, mais c'est un detail

$("[title]").mousemove(function(event){info_bulle(event, this.title);});



function info_bulle(e, texte)

{

	document.getElementById('texte_info_bulle').innerHTML = texte;

	positionne_pop_up_on_mouse('info_bulle', e);

}

[Anthor]

Pourquoi tu utilise 50 fonctions pour une si petite chose ?!

[Sephi-Chan]

Damned… Tu utilises jQuery mais tu mets encore du code crappy dedans… :/ C'est pas encore ça, mais tu es sur la bonne voix ! ^^

$("[title]").mousemove(function(event){

  $('#texte_info_bulle').html(texte, $(this).attr('title'));

  event.preventDefault();

});

Et tant qu'à faire montre nous le code de positionne_pop_up_on_mouse, il doit sûrement y avoir des trucs à corriger dedans.


Sephi-Chan

[Argorate]

Bon, tu as un peu oublié l'apostrophe et d'enlever "texte, " mais bon :p

J'ai ça maintenant:

$("[title]").mousemove(function(event)

{

	$('#texte_info_bulle').html($(this).attr('title'));

	positionne_pop_up_on_mouse('info_bulle', event);

	event.preventDefault();

});

Et l'info bulle de base s'affiche tjs

PS: c'est quoi l'utilité d'ecrire $(this).attr('title') à la place de this.title qui est quand meme 100 fois plus lisible et plus rapide a écrire puisque ça fait strictement la meme chose?

[Sephi-Chan]

Bon, tu as un peu oublié l'apostrophe et d'enlever "texte, " mais bon :p

J'ai ça maintenant:

$("[title]").mousemove(function(event)

{

	$('#texte_info_bulle').html($(this).attr('title'));

	positionne_pop_up_on_mouse('info_bulle', event);

	event.preventDefault();

});

Et l'info bulle de base s'affiche tjs

PS: c'est quoi l'utilité d'ecrire $(this).attr('title') à la place de this.title qui est quand meme 100 fois plus lisible et plus rapide a écrire puisque ça fait strictement la meme chose?

Certains attributs ne sont accessibles qu'à certains types de balises (par exemple this.action fonctionnera sur une balise form, mais pas sur un lien auquel tu as mis un attribut action. Je préfère opter pour une écriture qui fonctionne toujours, car un code homogène est un code plus propre.

Et si la quantité de caractère te dérangeait vraiment, tu n'utiliserais pas
document.getElementById('texte_info_bulle').innerHTML = texte; alors que tu peux faire $('#texte_info_bulle').html(text);, n'est-ce pas ?


Par contre, le event.preventDefault(); ne fonctionne en effet pas dans ce cas là. Une discussion sur Stack Overflow en parle. Leur suggestion est de passer avec jQuery pour supprimer les attributs title (en les stockant sous forme de données ou d'attributs personnalisés, afin d'avoir accès à leur contenu) :

$(document).ready(function(){

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

    $this = $(this);

    $this.attr('data-title', $this.attr('title'));

    $this.removeAttr('title');

  });

});

Et du coup, tu peux faire ça :

$("[title]").mousemove(function(event){

  $('#texte_info_bulle').html(texte, $(this).attr('data-title'));

  event.preventDefault();

});

Et n'oublie pas nous montrer quand même ta fonction positionne_pop_up_on_mouse.


Sephi-Chan

[Argorate]

Bon, admetons cette methode, j'ai du coup un autre petit problème, c'est si je veux mettre des images par exemple, cela pose problème au niveau syntaxique, rien n'y fait...

title="<img src=\"\" title=\"l'arbre\""

title="<img src='' title='l\'arbre'"

title='<img src="" title="l'arbre"'

title='<img src="" title="l\'arbre"'

Donc je sais pas si je vais laisser ça dans le title finalement


PS : pour le document.getElementById('texte_info_bulle').innerHTML, j'ai une fonction qui simplifie ça, c'était pour pas avoir a marqué 10 fonctions

et le positionne_pop_up_on_mouse ne fait qu'utiliser les e.pageX et Y, rien avoir avec le sujet

[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