Jquery easytooltip IE6 & & ID problems

Hi all,

I am trying to use multiple tooltips on the same page which works fine in ff, chrome, ie8. ie6 & 7 however dont like the use of identical id tags?

Im currently learning JQuery but not sure what I have to do to make both of these tooltips work, Iv tried changing the ids to classes etc to stop the clash but not getting anywhere.

Can anyone suggest how I can fix this problem?

Here is the page Easy Tooltip jQuery Plugin Demo

Thanks Kyle

Technically speaking an ID should only happen ONCE per page. Your JS is telling to show the item “tooltip” on every hover.

Hi rguy,

Thanks for the response, any suggestions on how I can fix this code so the tooltips work?

Kyle

JS is not my specialty, so I cannot give too much help. I have done somthing like using pure CSS.

Since the CSS and scripting all rely on working with the HTML code, you should start from the bottom and make sure that your foundations are good and solid.

Validate your HTML code and make sure all problems are resolved.
There’s no point investigating a scripting problem when the cause is in the HTML itself.

I presume that you’re going to want multiple links each with different tooltips. Multiple ID’s are not a solution for that. Identical ID’s are strictly forbidden, and incrementing values on the ID’s becomes a maintenance nightmare. The semantics people will rip your gizzards too if they catch you.

So, instead of using ID’s, use something else instead. You can temporarily use a class name, until you come across a better solution.

A better solution would be to place each link in a list item, or if using HTML5, in an individual article element each. That way a CSS context selector can be used to hide the div without needing a class at all.

But on with the class solution for now. The DIV’s class name will only be used to hide the content when the page loads.


.item {
    display: none;
}


<a href="http://cssglobe.com" [color="green"]class="link"[/color]>Hover over to display content</a>
<div [color="green"]class="item"[/color]>
    ...
</div>

The easyTooltip has a useElement option, but that only works with named ID’s.
One possible solution is to modify the easyTooltip plugin so that it also accepts a useSelector option.
Another solution is to use the content option instead, so that we can directly feed the content to the easyTooltip plugin.

Currently you pass all the links to the easyTooltip for processing. You need each tooltip to be different, so we need to process each of the links separately.

Where are we going to get the HTML content from? From the next div that comes after the link.


$(function () {	
    $("a.link").each(function () {
        $(this).easyTooltip({
            content: $(this).next('div').html()
        });
    });
});

Hi Paul,

Thanks alot for your advice!