Using ClueTip with Image Maps in IE

[C.Everson]

Hello,

I've been working with ClueTip (GREAT plug-in!) and image maps.

After digging around on Google for some time I came across the link to this
example:

http://test.learningjquery.com/clue/chic-test.html

(note that there are only two images that display the Cluetip and that
neither has a title.  You will see what appears to be a native tip, but
that is coming from the Alt tag on this page).


Based on that I was able to get it working on the Image Map, but I do have
one problem.

The native title attribute displays in IE (it does not in FF). If I remove
it from the link, then that gets rid of the native tip, but then I can't
use the Title attribute to pass the title for the tooltip to ClueTip and

I'd really like to be able to use that feature.

Does anyone have an idea on either how to get rid of the native title
display in IE, or how to pass a title to ClueTip in some other fashion?

I'm really close to getting this working like I want it, but hate to give
up the title on the tips.

Thanks for any and all assistance and ideas!

Chuck

[Karl Swedberg-3]

Hi there,

Sorry for the delay in replying. I'll try to take a look at this  
tonight.

--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jul 3, 2008, at 5:27 AM, C.Everson wrote:

>
> Hello,
>
> I've been working with ClueTip (GREAT plug-in!) and image maps.
>
> After digging around on Google for some time I came across the link  
> to this
> example:
>
> http://test.learningjquery.com/clue/chic-test.html
>
> (note that there are only two images that display the Cluetip and that
> neither has a title.  You will see what appears to be a native tip,  
> but
> that is coming from the Alt tag on this page).
>
>
> Based on that I was able to get it working on the Image Map, but I  
> do have
> one problem.
>
> The native title attribute displays in IE (it does not in FF). If I  
> remove
> it from the link, then that gets rid of the native tip, but then I  
> can't
> use the Title attribute to pass the title for the tooltip to ClueTip  
> and
>
> I'd really like to be able to use that feature.
>
> Does anyone have an idea on either how to get rid of the native title
> display in IE, or how to pass a title to ClueTip in some other  
> fashion?
>
> I'm really close to getting this working like I want it, but hate to  
> give
> up the title on the tips.
>
> Thanks for any and all assistance and ideas!
>
> Chuck
>
>
>
>

[C.Everson]

On Thu, 3 Jul 2008 14:12:56 -0400, Karl Swedberg wrote:

> Sorry for the delay in replying. I'll try to take a look at this  
> tonight.

Thanks Karl!

BTW, another issue that I ran into with the Image Maps is that REL appears
to NOT be a valid attribute of the <AREA> tag.  This was causing HTML
validation to croak<g>.  I was able to reset ClueTip to use the "href" to
pass the ID of a hidden content div down the page, but that seems a bit of
a kludge...


Thinking about that (and digging into your code some more) I found that the
first parameter to ClueTip can be the tip.

That made me wonder if (for Image Maps) it might be better to be able to
set splitTitle: true and then pass both the tip and title as the first
parameter (with the "|" or whatever as the split element.

Of course that would not make the map 508 friendly (since there would be no
Alt or Title over the AREA), but it might be a way to make things work and
still pass validation.

If that was an option, then I guess the only other consideration would be
how to solve the REL issue (and still pass validation).


Another idea (if possible), might be to use splitTitle and get it to pull
the tip title from the first part of the content pulled in for the tip...

Anyway - thanks again for your great work on this and I look forward to
seeing what you come up with.

Chuck

[Karl Swedberg-2]

ok. quick suggestion for now until I look more into this:

you don't need to use the rel attribute at all. you can instead set  
the attribute option to any attribute you want. You could use the  
title attribute from the area for the clueTip title (default) or use  
the alt attribute for it; you can use the href attribute to fetch the  
contents from an element with a matching id.

$('area').cluetip({
        attribute: 'href',
        titleAttribute: 'alt',
        local: true
});



--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jul 3, 2008, at 3:04 PM, C.Everson wrote:

>
> On Thu, 3 Jul 2008 14:12:56 -0400, Karl Swedberg wrote:
>
>> Sorry for the delay in replying. I'll try to take a look at this
>> tonight.
>
> Thanks Karl!
>
> BTW, another issue that I ran into with the Image Maps is that REL  
> appears
> to NOT be a valid attribute of the <AREA> tag.  This was causing HTML
> validation to croak<g>.  I was able to reset ClueTip to use the  
> "href" to
> pass the ID of a hidden content div down the page, but that seems a  
> bit of
> a kludge...
>
>
> Thinking about that (and digging into your code some more) I found  
> that the
> first parameter to ClueTip can be the tip.
>
> That made me wonder if (for Image Maps) it might be better to be  
> able to
> set splitTitle: true and then pass both the tip and title as the first
> parameter (with the "|" or whatever as the split element.
>
> Of course that would not make the map 508 friendly (since there  
> would be no
> Alt or Title over the AREA), but it might be a way to make things  
> work and
> still pass validation.
>
> If that was an option, then I guess the only other consideration  
> would be
> how to solve the REL issue (and still pass validation).
>
>
> Another idea (if possible), might be to use splitTitle and get it to  
> pull
> the tip title from the first part of the content pulled in for the  
> tip...
>
> Anyway - thanks again for your great work on this and I look forward  
> to
> seeing what you come up with.
>
> Chuck
>
>
>
>
>

[David Morton-4]

I know, I'm using the "for" attribute too.  The thing is, sometimes all the valid attributes are already in use for their "proper" uses...  the title attribute is used by thickbox for its caption, and I don't want it set there.  (yeah, thickbox needs an option to ignore it)

So it would be nice to have another option. :)

I think it would be easy... add an option "autoid", and then around line 249,

 } else if (opts.local){
    if(opts.autoid) {
       var $localContent = $('cluetip_' + this.attr('id') + ':first');
    } else {
        var $localContent = $(tipAttribute + ':first');
   }

Or something like that... untested right now... I'm completely guessing.  Maybe I can look at it tomorrow.

On Fri, Jul 4, 2008 at 10:39 PM, Karl Swedberg <karl@...> wrote:

ok. quick suggestion for now until I look more into this:

you don't need to use the rel attribute at all. you can instead set the attribute option to any attribute you want. You could use the title attribute from the area for the clueTip title (default) or use the alt attribute for it; you can use the href attribute to fetch the contents from an element with a matching id.

$('area').cluetip({
       attribute: 'href',
       titleAttribute: 'alt',
       local: true
});



--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jul 3, 2008, at 3:04 PM, C.Everson wrote:

On Thu, 3 Jul 2008 14:12:56 -0400, Karl Swedberg wrote:

Sorry for the delay in replying. I'll try to take a look at this
tonight.

Thanks Karl!

BTW, another issue that I ran into with the Image Maps is that REL appears
to NOT be a valid attribute of the <AREA> tag.  This was causing HTML
validation to croak<g>.  I was able to reset ClueTip to use the "href" to
pass the ID of a hidden content div down the page, but that seems a bit of
a kludge...


Thinking about that (and digging into your code some more) I found that the
first parameter to ClueTip can be the tip.

That made me wonder if (for Image Maps) it might be better to be able to
set splitTitle: true and then pass both the tip and title as the first
parameter (with the "|" or whatever as the split element.

Of course that would not make the map 508 friendly (since there would be no
Alt or Title over the AREA), but it might be a way to make things work and
still pass validation.

If that was an option, then I guess the only other consideration would be
how to solve the REL issue (and still pass validation).


Another idea (if possible), might be to use splitTitle and get it to pull
the tip title from the first part of the content pulled in for the tip...

Anyway - thanks again for your great work on this and I look forward to
seeing what you come up with.

Chuck

--
David Morton
mortonda@... - bulk address
mortonda@... - direct to my server

[David Morton-4]

whoops, I hijacked another thread.. but maybe it applies anyway... lol

On Fri, Jul 4, 2008 at 11:20 PM, David Morton <mortonda@...> wrote:

I know, I'm using the "for" attribute too.  The thing is, sometimes all the valid attributes are already in use for their "proper" uses...  the title attribute is used by thickbox for its caption, and I don't want it set there.  (yeah, thickbox needs an option to ignore it)

So it would be nice to have another option. :)

I think it would be easy... add an option "autoid", and then around line 249,

 } else if (opts.local){
    if(opts.autoid) {
       var $localContent = $('cluetip_' + this.attr('id') + ':first');
    } else {
        var $localContent = $(tipAttribute + ':first');
   }

Or something like that... untested right now... I'm completely guessing.  Maybe I can look at it tomorrow.

On Fri, Jul 4, 2008 at 10:39 PM, Karl Swedberg <karl@...> wrote:

ok. quick suggestion for now until I look more into this:

you don't need to use the rel attribute at all. you can instead set the attribute option to any attribute you want. You could use the title attribute from the area for the clueTip title (default) or use the alt attribute for it; you can use the href attribute to fetch the contents from an element with a matching id.

$('area').cluetip({
       attribute: 'href',
       titleAttribute: 'alt',
       local: true
});



--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jul 3, 2008, at 3:04 PM, C.Everson wrote:

On Thu, 3 Jul 2008 14:12:56 -0400, Karl Swedberg wrote:

Sorry for the delay in replying. I'll try to take a look at this
tonight.

Thanks Karl!

BTW, another issue that I ran into with the Image Maps is that REL appears
to NOT be a valid attribute of the <AREA> tag.  This was causing HTML
validation to croak<g>.  I was able to reset ClueTip to use the "href" to
pass the ID of a hidden content div down the page, but that seems a bit of
a kludge...


Thinking about that (and digging into your code some more) I found that the
first parameter to ClueTip can be the tip.

That made me wonder if (for Image Maps) it might be better to be able to
set splitTitle: true and then pass both the tip and title as the first
parameter (with the "|" or whatever as the split element.

Of course that would not make the map 508 friendly (since there would be no
Alt or Title over the AREA), but it might be a way to make things work and
still pass validation.

If that was an option, then I guess the only other consideration would be
how to solve the REL issue (and still pass validation).


Another idea (if possible), might be to use splitTitle and get it to pull
the tip title from the first part of the content pulled in for the tip...

Anyway - thanks again for your great work on this and I look forward to
seeing what you come up with.

Chuck

--
David Morton
mortonda@... - bulk address
mortonda@... - direct to my server

--
David Morton
mortonda@... - bulk address
mortonda@... - direct to my server

[David Morton-4]

I don't have this entire thread in my inbox, but it looks like the patch I posted in the other current cluetip thread may be of use here...

On Fri, Jul 4, 2008 at 11:21 PM, David Morton <mortonda@...> wrote:

whoops, I hijacked another thread.. but maybe it applies anyway... lol

On Fri, Jul 4, 2008 at 11:20 PM, David Morton <mortonda@...> wrote:

I know, I'm using the "for" attribute too.  The thing is, sometimes all the valid attributes are already in use for their "proper" uses...  the title attribute is used by thickbox for its caption, and I don't want it set there.  (yeah, thickbox needs an option to ignore it)

So it would be nice to have another option. :)

I think it would be easy... add an option "autoid", and then around line 249,

 } else if (opts.local){
    if(opts.autoid) {
       var $localContent = $('cluetip_' + this.attr('id') + ':first');
    } else {
        var $localContent = $(tipAttribute + ':first');
   }

Or something like that... untested right now... I'm completely guessing.  Maybe I can look at it tomorrow.

On Fri, Jul 4, 2008 at 10:39 PM, Karl Swedberg <karl@...> wrote:

ok. quick suggestion for now until I look more into this:

you don't need to use the rel attribute at all. you can instead set the attribute option to any attribute you want. You could use the title attribute from the area for the clueTip title (default) or use the alt attribute for it; you can use the href attribute to fetch the contents from an element with a matching id.

$('area').cluetip({
       attribute: 'href',
       titleAttribute: 'alt',
       local: true
});



--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jul 3, 2008, at 3:04 PM, C.Everson wrote:

On Thu, 3 Jul 2008 14:12:56 -0400, Karl Swedberg wrote:

Sorry for the delay in replying. I'll try to take a look at this
tonight.

Thanks Karl!

BTW, another issue that I ran into with the Image Maps is that REL appears
to NOT be a valid attribute of the <AREA> tag.  This was causing HTML
validation to croak<g>.  I was able to reset ClueTip to use the "href" to
pass the ID of a hidden content div down the page, but that seems a bit of
a kludge...


Thinking about that (and digging into your code some more) I found that the
first parameter to ClueTip can be the tip.

That made me wonder if (for Image Maps) it might be better to be able to
set splitTitle: true and then pass both the tip and title as the first
parameter (with the "|" or whatever as the split element.

Of course that would not make the map 508 friendly (since there would be no
Alt or Title over the AREA), but it might be a way to make things work and
still pass validation.

If that was an option, then I guess the only other consideration would be
how to solve the REL issue (and still pass validation).


Another idea (if possible), might be to use splitTitle and get it to pull
the tip title from the first part of the content pulled in for the tip...

Anyway - thanks again for your great work on this and I look forward to
seeing what you come up with.

Chuck

--
David Morton
mortonda@... - bulk address
mortonda@... - direct to my server

--
David Morton
mortonda@... - bulk address
mortonda@... - direct to my server

--
David Morton
mortonda@... - bulk address
mortonda@... - direct to my server

[C.Everson]

On Fri, 4 Jul 2008 23:39:42 -0400, Karl Swedberg wrote:

> ok. quick suggestion for now until I look more into this:
>
> you don't need to use the rel attribute at all. you can instead set  
> the attribute option to any attribute you want. You could use the  
> title attribute from the area for the clueTip title (default) or use  
> the alt attribute for it; you can use the href attribute to fetch the  
> contents from an element with a matching id.
>
> $('area').cluetip({
> attribute: 'href',
> titleAttribute: 'alt',
> local: true
> });

Thanks Karl,

That is exactly what I have been doing right now<g>.

I have these settings:

$('area.load-local').cluetip({
        local:true,
        hideLocal: true,
        showTitle: true,
        sticky: false,
        arrows: true,
        titleAttribute: 'alt',
        attribute: 'href' });
});

Thanks for confirming my logic (in your other post reply) that for local
content using href would be good in case JS was turned off.

I figured that (in normal operation) the local content is hidden in divs
below the image map and they display as the Cluetip.  But that if JS was
disabled they would appear below the image map and the href would serve as
a anchor link to jump to it.

If you can figure out the IE thing, I think this will be a solid winner for
me!

Chuck