Tooltips / JSON Question

[soundseller]

Hello,
I am trying to get some data via JSON and display it in my tooltips.
It works quite well, but I want to pass a variable to the php script
(term).
This variable I want to get from the tooltip's link "rel" tag(In this
case Germany).
[code=text] <a href="#" class="tips" rel="Germany" title="">germany.</
a> [/code]

[code=text] var term = el.get('rel');   [/code]
The above code does not work inside the "onShow" function.(Object
[object Object] has no method 'get')

[code=text]   
var tipz = new Tips('.tips',{
        className: 'tips',
        fixed: false,
        hideDelay: 50,
        showDelay: 50,
   
    onShow: function(tip,el) {
                var term = el.get('rel');   
    tip.fade('in');
    var req = new Request.JSON({
            method: 'get',
            noCache:true,
            url: 'ajax.php',
                        data: { 'term' : term},
            onRequest: function() {$$('.tip-
text').set('html','<div>loading</div>');  },
           
            onComplete: function(response) {
                $$('.tip-title').set('html','<strong>'+response.header
+'</strong>');
                $$('.tip-text').set('html','<img src="'+response.image
+'"/><strong>'+response.content+'</strong>');
                }
        }).send();
   },
   onHide: function(tip,el) {
    tip.fade('out');
   }
    });
[/code]

How would you do this?
Any ideas?
Thx in advance

[Sanford Whiteman]

> [code=text] var term = el.get('rel');   [/code]
> The above code does not work inside the "onShow" function.(Object
> [object Object] has no method 'get')

Looks like you whould wrap it in $() -- also, pop this in a MooShell
for more help.

-- Sandy

[soundseller]

Thnx for your reply, I will try it out.
http://mootools.net/shell/RVAeU/1/

On Mar 23, 12:33 am, Sanford Whiteman <sa...@cypressintegrated.com>
wrote:

[soundseller]

I tried using $(el)... but it doesn't work.
Seems like "tip" and "$(el)" are getting the same elements.
If I use "$(el).fade('in');" the tips work the same way they do if I
use "tip.fade('in');"
In the docs it says
"The default function for the show event, passes the tip element and
the currently hovered element."
So how can I access attributes from the currently hovered element
inside the onShow function?
Thanks for your help!

On Mar 23, 12:22 pm, soundseller <soundsel...@googlemail.com> wrote:
> Thnx for your reply, I will try it out.http://mootools.net/shell/RVAeU/1/

[soundseller]

So I tried sth else, which is terrible code, but maybe you can see
what I am
trying to do and give me some support.
It works only on the second hover.

http://mootools.net/shell/RVAeU/4/

Thnx

[Matthew Hazlett]

Yes, your code makes no sense.

When you hover and show the tool tip you are adding an event to reset the
tool tip next time it is shown.
You need to execute the updater on that iteration not the next one.

http://mootools.net/shell/RVAeU/5/

http://mootools.net/shell/RVAeU/4/

Thnx

To unsubscribe from this group, send email to
mootools-users+unsubscribegooglegroups.com or reply to this email with the
words "REMOVE ME" as the subject.

[soundseller]

Hi Matthew,
thanks for your help.
The problem is, that if I have several links with tooltips attached,
everytime one of them
is hovered, the requests for all of them are fired.

http://mootools.net/shell/RVAeU/6/

Hmmm...
Any help is appreciated.

[Matthew Hazlett]

Why are you using an each loop then, just update one not all :/
(RTFM might help too) :-)

http://mootools.net/docs/core

Instead of:

onShow: function(tip,el) {
tip.fade('in');
var ttips = $$('a.tips');
ttips.each(function(element,index) {
get_content(element.getAttribute('term'));
});
},

Just use:

onShow: function(tip,el) {
tip.fade('in');
get_content(tip);
},

[soundseller]

Hi Matthew,
thanks for your patience.

As I pointed out in my first post I want to pass a variable to the
request function.
This variable I want to get from the tooltip element(currently hovered
element).

It says in the docs(Yes, I did take a look at them :) "The default

function for the show event, passes the tip element and the currently
hovered element."

Thats why I thought I could do sth like this:

...onShow: function(tip,el) {
var term = el.getAttribute('term');...
or this:

...onShow: function(tip,el) {
var term = $(el).get('rel');...

But that does not work.
So I came up with all that crazy stuff.
Any help is appreciated.

[Matthew Hazlett]

I don't know why kind of data you are trying to pass, but it's really easy
to do (it's just calling a function). I'm not going to write it for you,
you need to keep trying but you are on the right path.

I'll give you a hint, pass two variables to get_content one is the tip
object the other you need to figure out for yourself.

You can also look at this (they may or may not be what you want)
http://mootools.net/docs/more/Interface/Tips
http://mootools.net/docs/core/Element/Element#Element:get
http://mootools.net/docs/core/Element/Element#Element:store
http://mootools.net/docs/core/Element/Element#Element:retrieve

[soundseller]

Hi,
thnx for your reply.
I tried to get a value from the hovered element(term):

<a href="#" class="tips" term="Germany">Germany</a>

I thought that according to the docs the above element gets passed as
"el" to the

...onShow: function(tip,el) {
var term = el.getAttribute('term');...

function and that I could retrieve it like this:

var term = el.getAttribute('term');

But I get an error:

Object [object Object] has no method 'getAttribute'

So I tried it like this:

var term = $(el).getAttribute('term');

Doesn't work either.
Will keep on trying.
Cheers

On Mar 24, 2:50 am, "Matthew Hazlett" <hazl...@gmail.com> wrote:
> I don't know why kind of data you are trying to pass, but it's really easy
> to do (it's just calling a function).  I'm not going to write it for you,
> you need to keep trying but you are on the right path.  
>
> I'll give you a hint, pass two variables to get_content one is the tip
> object the other you need to figure out for yourself.
>

> You can also look at this (they may or may not be what you want)http://mootools.net/docs/more/Interface/Tipshttp://mootools.net/docs/core/Element/Element#Element:gethttp://mootools.net/docs/core/Element/Element#Element:storehttp://mootools.net/docs/core/Element/Element#Element:retrieve

[Matthew Hazlett]

Use a tag that exists already like alt.

This is all I can suggest to you, all you have to do is read the
documentation. If you can't figure it out from all these hints then you
should think about taking up tennis. I don't even think you are trying.

<a id="foo" alt="Tennis is fun">Serve</a>
alert( $("foo").get("alt") ); // Prints out Tennis is fun

Also look here:

http://mootools.net/docs/more/Interface/Tips
http://mootools.net/docs/core/Element/Element#Element:get

[soundseller]

Hello Matthew,
thanks for the advice.
You have been really helpful and kind.

I have already tried all the stuff you are trying to tell me(in my
initial post I already tried to get the element using
el.get("alt") ), but the problem is
that none of that worked ->

...onShow: function(tip,el) {
tried this

var term = el.getAttribute('term');

and
var term = el.get('alt');
and
var term = el.get('whatever');
or
var term = $(el).get('whatever');

...
I know how to get an elements property.
What I don't know is how to get the elements property of the currently
hovered tooltip link - from within the "onShow" function.

I thought that the "hovered element" is being passed to the "onShow"
function

"...onShow: function(tip, el <-hovered element? ) {"

but all I get if I try to use el.get("alt") is "Object [object Object]
has no method 'get'"

Oh well - sun is shining - gonna get my shorts now - off to the court!

On Mar 24, 4:37 pm, "Matthew Hazlett" <hazl...@gmail.com> wrote:
> Use a tag that exists already like alt.
>
> This is all I can suggest to you, all you have to do is read the
> documentation.  If you can't figure it out from all these hints then you
> should think about taking up tennis.  I don't even think you are trying.
>
> <a id="foo" alt="Tennis is fun">Serve</a>
> alert( $("foo").get("alt") );  // Prints out Tennis is fun
>

> Also look here:http://mootools.net/docs/more/Interface/Tipshttp://mootools.net/docs/core/Element/Element#Element:get

[Matthew Hazlett]

ok, upon closer inspection I see there is an issue with the passed in
parameter. el is not reflecting the caller object. However there is a
workaround cheesy as it may be.

http://mootools.net/shell/GjkeU/

var myTips = new Tips('.thisisatooltip', {
onShow: function(tip, el) {
tip.fade('in');
thisTip = tip.getElement(".tip-title").get("html");
// doWhatever(thisTip);
}
});

Maybe a core dev can look into this problem.

[soundseller]

Hey Matthew,
thanks for taking your time.
Hopefully this will be fixed soon.
Cheers

[Matthew Hazlett]

Going to open a ticket for this issue:

In the Tip class this can be fixed by changing
"show: function(element){" to "show: function(obj, element){"

Working example at:
http://mootools.net/shell/u5wbL/

[Matthew Hazlett]

Ticket:
https://mootools.lighthouseapp.com/projects/24057-mootoolsmore/tickets/290

[Aaron Newton]

Yes. Tips was/is passing the wrong arguments here. I've fixed it:

http://github.com/mootools/mootools-more/commit/0a0c03ff41334a432e2e091142e1925e9354138f

for the next release.

[soundseller]

Excellent :)

On Mar 25, 12:49 am, Aaron Newton <aa...@iminta.com> wrote:
> Yes. Tips was/is passing the wrong arguments here. I've fixed it:
>

> http://github.com/mootools/mootools-more/commit/0a0c03ff41334a432e2e0...
>
> for the next release.
>
>
>
> On Wed, Mar 24, 2010 at 1:38 PM, Matthew Hazlett <hazl...@gmail.com> wrote:
> > Ticket:
> >https://mootools.lighthouseapp.com/projects/24057-mootoolsmore/ticket...

> > want)
> >http://mootools.net/docs/more/Interface/Tipshttp://mootools.net/docs/co
>
> > re/Element/Element#Element:gethttp://
> > mootools.net/docs/core/Element/Element#
>
> > Element:storehttp://