Forum: Rails France Tooltip en automatique

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
740cd8c5438370ea1be7c66bb3d20582?d=identicon&s=25 Florent LEBEAU (Guest)
on 2009-01-14 14:18
(Received via mailing list)
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.
Fc37191f4c6e09e30527df4913738aea?d=identicon&s=25 Nicolas Cavigneaux (Guest)
on 2009-01-14 14:50
(Received via mailing list)
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 <span class="tooltip">\1</span>
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, '<span class="tooltip">\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 Cavigneaux
http://www.bounga.org
http://www.cavigneaux.net
740cd8c5438370ea1be7c66bb3d20582?d=identicon&s=25 kobra (Guest)
on 2009-01-14 15:01
(Received via mailing list)
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 :) Je vais également découvrir Mootools sur
tes conseils.

Encore merci pour ton aide.

Florent
5d3f7d8e534a892e3029a3f3b9761de5?d=identicon&s=25 Joël Azemar (Guest)
on 2009-01-14 15:08
(Received via mailing list)
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 :-(

joel

2009/1/14 Nicolas Cavigneaux <cavigneaux@gmail.com>
Fc37191f4c6e09e30527df4913738aea?d=identicon&s=25 Nicolas Cavigneaux (Guest)
on 2009-01-14 15:08
(Received via mailing list)
Le 14 janv. 09 à 14:50, Nicolas Cavigneaux a écrit :

Petite erreur de ma part :

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

C'est en fait :

@tooltiped_body = article.body.gsub(re, '<span class="tooltip">\0</
span>')

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

--
Nicolas Cavigneaux
http://www.bounga.org
http://www.cavigneaux.net
Fc37191f4c6e09e30527df4913738aea?d=identicon&s=25 Nicolas Cavigneaux (Guest)
on 2009-01-14 15:08
(Received via mailing list)
Le 14 janv. 09 à 14:50, Nicolas Cavigneaux 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, '<span class="tooltip">\0</span>')

# => "j'aime les <span class="tooltip">plop</span> et les <span
class="tooltip">hop</span>"

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 Cavigneaux
http://www.bounga.org
http://www.cavigneaux.net
Fc37191f4c6e09e30527df4913738aea?d=identicon&s=25 Nicolas Cavigneaux (Guest)
on 2009-01-14 22:03
(Received via mailing list)
Attachment: mootools_test.zip (70 KB)
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 :-(

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 :-)

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.
5d3f7d8e534a892e3029a3f3b9761de5?d=identicon&s=25 Joël Azemar (Guest)
on 2009-01-15 09:48
(Received via mailing list)
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 Cavigneaux <cavigneaux@gmail.com>
Fc37191f4c6e09e30527df4913738aea?d=identicon&s=25 Nicolas Cavigneaux (Guest)
on 2009-01-15 10:41
(Received via mailing list)
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 Cavigneaux
http://www.bounga.org
http://www.cavigneaux.net
5d3f7d8e534a892e3029a3f3b9761de5?d=identicon&s=25 Joël Azemar (Guest)
on 2009-01-15 11:02
(Received via mailing list)
Ok d'accord je comprends mieux l'ordre ! C'est un autre mode de pensée
le
javascript ;-) Merci pour le code de l'Observer.

Joël AZEMAR

2009/1/15 Nicolas Cavigneaux <cavigneaux@gmail.com>
740cd8c5438370ea1be7c66bb3d20582?d=identicon&s=25 kobra (Guest)
on 2009-01-16 14:52
(Received via mailing list)
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 :) 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
Fc37191f4c6e09e30527df4913738aea?d=identicon&s=25 Nicolas Cavigneaux (Guest)
on 2009-01-16 15:20
(Received via mailing list)
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 :) Le fait
> de partir de quelque chose qui fonctionne est toujours d'une grande
> aide.

Ca fait plaisir de savoir que ça aide :-)

> [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 Cavigneaux
http://www.bounga.org
http://www.cavigneaux.net
740cd8c5438370ea1be7c66bb3d20582?d=identicon&s=25 kobra (Guest)
on 2009-01-16 15:29
(Received via mailing list)
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 :)
Encore merci
740cd8c5438370ea1be7c66bb3d20582?d=identicon&s=25 kobra (Guest)
on 2009-01-16 16:56
(Received via mailing list)
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 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <%= stylesheet_link_tag 'tooltips' %>
  <style type="text/css" media="screen">
    span.help { font-weight:bold; }
  </style>
  <%= javascript_include_tag :defaults %>
  <%= javascript_include_tag 'tooltips' %>
  <%= javascript_include_tag 'scriptaculous' %>
  <%= javascript_include_tag 'builder' %>
</head>
<body>
    <div>
        <p>Lorem ipsum <span class="help" title="<b>TEST</b><br />
Ceci est la description">dolor</span> sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.</p>
    </div>
  <script type="text/javascript" charset="utf-8">
    $$("p .help").each( function(input) {
      new Tooltip(input, {backgroundColor: "#333", borderColor: "#333",
textColor: "#FFF", textShadowColor: "#000"});
    });
  </script>
</body>
</html>

Reste plus qu'à rendre le "title" dynamique en fonction du mot et le
tour est joué :D
This topic is locked and can not be replied to.