Tooltip en automatique


#1

Bonjour à tous,

Mettons-nous en situation : J’ai un texte quelconque dans une base de
données toute aussi quelconque. En parallèle, j’ai un dictionnaire dans
cette même base de données.
Existe-t-il un plugin ou une best way pour faire en sorte que chaque mot
du
texte présent dans le dictionnaire bénéficie d’une tooltip (info bulle
genre
http://blog.innerewut.de/tooltip ) en automatique ?
Je suis également preneur d’une éventuelle liste des meilleurs plugins
facilitant la création d’info bulle.

Merci beaucoup.


#2

Bonjour Nicolas,

Merci pour la rapidité et la précision de ta réponse.

J’ai bien évidemment googlé avant de vous soumette mon message, mais
mes recherches on principalement abouti à l’info bulle type google, ou
alors des tooltips “statiques” (créer le lien sur chaque mot). Étant
profondément convaincu que Ruby est de loin le plus beau langage de
l’univers, j’ai pensé au gsub mais j’espérais au fond de moi qu’un de
ces plugins qui vous mâchent et digèrent le travail existe pour mon
besoin.

Je vais tester ta méthode bourrine, qui bien commentée devrait être
relativement maintenable :slight_smile: Je vais également découvrir Mootools sur
tes conseils.

Encore merci pour ton aide.

Florent


#3

Le 14 janv. 09 à 14:17, Florent LEBEAU a écrit :

Bonjour à tous,

Bonjour Florent.

Mettons-nous en situation : J’ai un texte quelconque dans une base
de données toute aussi quelconque. En parallèle, j’ai un
dictionnaire dans cette même base de données.
Existe-t-il un plugin ou une best way pour faire en sorte que chaque
mot du texte présent dans le dictionnaire bénéficie d’une tooltip
(info bulle genre http://blog.innerewut.de/tooltip ) en automatique ?

Pas à ma connaissance, mais je n’ai pas Googlé. Tu as fais des
recherches ?

La seule fois où j’ai voulu faire ça, j’ai fait le bourin mais ça
fonctionnait :

je prend mon texte de référence
j’y applique un gsub (oui ça peut être lent sur de gros textes)
incluant tous mes termes à “tooltiper” (Je n’ai pas testé mais la
RegExp a utiliser devrait être du genre /mot_1|mot_2|mot_3/
je remplace par \1
un Observer ajax scrute le hover sur la classe “tooltip” et requête en
utilisant ce contenu pour l’afficher

Pour référence : http://apidock.com/ruby/String/gsub

Un exemple :

On récupére l’article

article = Article.first

On crée une chaine “RegExp” qui contient les mot à tooltiper

words = Dict.all.collect(&:name).join(’|’)
re = Regexp.new(words)

crée le corps de texte tooltipé
@tooltiped_body = article.body.gsub(re, ‘\1</
span>’)

Bon c’est sûrement loin d’être parfait ou idiomatique mais ça a pris 2
minutes et l’idée est là .

Je suis également preneur d’une éventuelle liste des meilleurs
plugins facilitant la création d’info bulle.

Perso j’aime bien MooTools pour les tooltips, je l’aime de manière
générale lorsque je dois créer des effets visuels.

Nicolas C.
http://www.bounga.org
http://www.cavigneaux.net


#4

Le 14 janv. 09 à 14:50, Nicolas C. a écrit :

Petite erreur de ma part :

crée le corps de texte tooltipé
@tooltiped_body = article.body.gsub(re, ‘\1</
span>’)

C’est en fait :

@tooltiped_body = article.body.gsub(re, ‘\0</
span>’)

\0 qui prend tout le match et non pas \1 qui prendrait un éventuel
sous-groupe


Nicolas C.
http://www.bounga.org
http://www.cavigneaux.net


#5

Moi je serai intéressé par le code de l’Observer ajax avec Mootools, si
tu
l’a codé bien sûr ! Car je débutes en javascript et j’ai décidé de
commencer
avec Mootools mais c’est dur :frowning:

joel

2009/1/14 Nicolas C. removed_email_address@domain.invalid


#6

Le 14 janv. 09 à 14:50, Nicolas C. a écrit :

Bon c’est sûrement loin d’être parfait ou idiomatique mais ça a pris
2 minutes et l’idée est là.

Une petite session IRB qui confirme que l’idée fonctionne :

Mots à tooltiper

words = [‘hop’, ‘plop’].join(’|’)

Création de la regexp

re = Regexp.new(words)

Transformation du texte

original = “j’aime les plop et les hop”
tooltiped = original.gsub(re, ‘\0’)

=> "j’aime les plop et les <span

class=“tooltip”>hop"

A ce stade il n’y a plus qu’a rendre la vue et poser l’observeur JS
(sur tous les span.tooltip) qui ira rechercher la définition d’un mot
en fonction de son “nom” (contenu texte du span).

Nicolas C.
http://www.bounga.org
http://www.cavigneaux.net


#7

Le 14 janv. 09 à 15:07, Joël Azemar a écrit :

Moi je serai intéressé par le code de l’Observer ajax avec
Mootools, si tu l’a codé bien sûr ! Car je débutes en javascript et
j’ai décidé de commencer avec Mootools mais c’est dur :frowning:

J’ai codé un petit exemple pour toi. C’est une méthode parmi tant
d’autres. Les experts MooTools trouveraient certainement des façon
plus jolies et concises pour écrire ce code, notamment sur le Request
où on aurait pu utiliser Request.HTML mais au moins, là tu vois
vraiment comment ça se passe.

Je joins une archive d’un projet Rails créé pour l’occasion (pour les
requêtes AJAX, on a besoin d’un serveur qui renvoi des statut, etc).

Tout se passe dans app/views/home/index.html.erb. Il suffit d’y jeter
un oeil, c’est commenté.

La partie qui t’intéresse est dans la balise script du head.
Idéalement ce script aurait dû être placé dans un fichier .js externe
mais ce n’est ici qu’un exemple.

On utilise donc MooTools pour récupérer les spans qui nous intéresse

  • Tips (de MooTools More) pour la création des tiptools. Pour chaque
    span, on crée un tooltip en spécifiant son titre (le contenu de la
    balise span) et son texte (contenu récupérer via une requête AJAX).

Tout simple :slight_smile:

Il serait assez facile d’en faire une classe à laquelle on aurait
juste à préciser le selecteur CSS et l’URL d’interrogation pour la
récupération de la définition. On pourrait donc faire exactement la
même chose en une ligne. Je vais mettre ça sur ma Todo list d’ailleurs !

Une lecture qui pourrait t’intéresser pour bien démarrer : http://
mootorial.com/wiki/
Je te conseille également de jeter un oeil à l’API : http://
mootools.net/docs/
Et pour le Google Group, c’est ici : http://groups.google.com/group/
mootools-users

Bon amusement.


#8

Le 15 janv. 09 à 09:47, Joël Azemar a écrit :

Excellent exemple. Merci beaucoup ! Même si le faite de donner les
propriétés a Element span.tooltip avant de l’assigner à l’objet new
Tips(‘span.tooltip’); me déroute un peu j’aurai naturelement
instancié cet objet plus tôt. En revanche dans cette exemple c’est
la class Tips qui posséde donc un Observer ?!

En fait, j’instancie après parce que c’est pas le Tips à qui on
affecte la propriété mais bien l’élément DOM. C’est une extension que
propose MooTools, tu peux stocker des données “dans” l’élément HTML.
Si on ne procéde pas de cette manière, il faut mettre les infos
“inline” dans l’élément avec les attribut “title” et “rel” (de mémoire).

Quand ensuite on instancie l’objet Tip, il vérifie si on stocke dans
l’élément un tip:text et un tip:title et l’utilise plutôt que
d’utiliser les info inline. Je préfére, je trouve ça plus propre,
moins intrusif.

Et c’est bien l’objet Tip qui utilise les observer. Je n’ai pas
regardé le code en interne mais ça doit faire quelque chose du genre :

var el = $(‘id_de_mon_span’);
el.addEvent(‘hover’, function(el) {
// On crée la structure HTML pour le tooltip
// On l’affiche avec un petit effet visuel
});

Encore merci pour le temps passé, je comprends mieux comment
formuler une requet AJAX

Ce fût un plaisir.

Nicolas C.
http://www.bounga.org
http://www.cavigneaux.net


#9

Excellent exemple. Merci beaucoup ! Même si le faite de donner les
propriétés a Element span.tooltip avant de l’assigner à l’objet new
Tips(‘span.tooltip’); me déroute un peu j’aurai naturelement instancié
cet
objet plus tôt. En revanche dans cette exemple c’est la class Tips qui
posséde donc un Observer ?!

Encore merci pour le temps passé, je comprends mieux comment formuler
une
requet AJAX
Joël AZEMAR

2009/1/14 Nicolas C. removed_email_address@domain.invalid


#10

Ok d’accord je comprends mieux l’ordre ! C’est un autre mode de pensée
le
javascript :wink: Merci pour le code de l’Observer.

Joël AZEMAR

2009/1/15 Nicolas C. removed_email_address@domain.invalid


#11

Le 16 janv. 09 à 14:50, kobra a écrit :

Bonjour Nicolas,

Comme l’a déjà fait Joël, je souhaitais à mon tour te remercier pour
cet exemple bien concret que l’on peut torturer à souhait :slight_smile: Le fait
de partir de quelque chose qui fonctionne est toujours d’une grande
aide.

Ca fait plaisir de savoir que ça aide :slight_smile:

[Break on this error] onSuccess: function(res) {
test (ligne 54

Aurais-tu une idée d’où cela pourrait venir ? Prototype surchargerait
des fonctions javascript standards ?

Prototype surcharge effectivement des fonctions JS standards. De plus
l’utilisation conjointe de proto + mootools est impossible. Il y a
conflit entre ces deux framework.

Sans entrer dans les détails, c’est soit Prototype, soit Mootools, pas
les deux.

Nicolas C.
http://www.bounga.org
http://www.cavigneaux.net


#12

Bonjour Nicolas,

Comme l’a déjà fait Joël, je souhaitais à mon tour te remercier pour
cet exemple bien concret que l’on peut torturer à souhait :slight_smile: Le fait
de partir de quelque chose qui fonctionne est toujours d’une grande
aide.
J’aurai cependant un petit problème avec ton code. Le fait d’utiliser
prototype (<%= javascript_include_tag :defaults %>) provoque deux
erreurs et empêche le fonctionnement de l’observer :

this._each is not a function
[Break on this error] this._each(function(value) {
prototyp…229532005 (ligne 593)

Request is not a constructor
[Break on this error] onSuccess: function(res) {
test (ligne 54

Aurais-tu une idée d’où cela pourrait venir ? Prototype surchargerait
des fonctions javascript standards ?
Merci pour ton aide.

Florent


#13

Hummm, ben j’ai pas de bol alors! Va falloir que je m’amuse à adapter
ton test pour l’utiliser avec proto, soit adapter tout ce que j’ai
fait pour que ça fonctionne avec Mootools… A moins de développer moi
même une librairie javascript pour les tips compatible avec proto…
Quoi qu’il en soit, je tâcherai de partager mes travaux si ça en vaut
la peine :slight_smile:
Encore merci


#14

Ok, j’ai trouvé une solution pour générer des tips facilement. Je me
suis appuyé sur http://www.wildbit.com/labs/cooltips/ qui fonctionne
parfaitement avec prototype.
Pour pouvoir utiliser des balises html (et ainsi mettre en valeur le
titre), j’ai suivi à la lettre le fix proposé ici :
http://code.google.com/p/tooltips/issues/detail?id=7

Le code de ton home/index est devenu :

<%= stylesheet_link_tag 'tooltips' %> span.help { font-weight:bold; } <%= javascript_include_tag :defaults %> <%= javascript_include_tag 'tooltips' %> <%= javascript_include_tag 'scriptaculous' %> <%= javascript_include_tag 'builder' %>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Reste plus qu’Ã rendre le “title” dynamique en fonction du mot et le
tour est joué :smiley: