SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Technically speaking an ID should only happen ONCE per page. Your JS is telling to show the item "tooltip" on every hover.
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi rguy,

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

    Kyle

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    JS is not my specialty, so I cannot give too much help. I have done somthing like using pure CSS.
    Ryan B | My Blog | Twitter

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by kyllle View Post
    Thanks for the response, any suggestions on how I can fix this code so the tooltips work?
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    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.

    Code css:
    .item {
        display: none;
    }

    Code:
    <a href="http://cssglobe.com" class="link">Hover over to display content</a>
    <div class="item">
        ...
    </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.

    Code javascript:
    $(function () {	
        $("a.link").each(function () {
            $(this).easyTooltip({
                content: $(this).next('div').html()
            });
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks alot for your advice!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •