Image map

Andrei Bosco's Avatar

Andrei Bosco

19 Aug, 2010 04:49 PM

Hello, I'm trying to use TipTip with an image map but it isn't working correctly. The tooltip appears when hovering the mapped area, but it shows up on the top left corner of the page instead of near the cursor. Does anyone have a suggestion? Thanks.

  1. 1 Posted by Ps0ke on 23 Aug, 2010 09:17 PM

    Ps0ke's Avatar

    Yes, i have the same Problem. The Tooltip appears but in the center of the image instead of the center of the maparea. Is there a fix for that?
    Thanks in advandce

  2. 2 Posted by Purplered on 25 Aug, 2010 10:03 AM

    Purplered's Avatar

    same here... I think currently TipTip can't handle a tooltip over a map area. It seem the plugin uses the position of the Image to display the tooltip insted of the maparea.

  3. 3 Posted by Anti on 20 Oct, 2010 03:11 PM

    Anti's Avatar

    The problem still alives :/ Still no solution, anybody?

  4. 4 Posted by Purplered on 20 Oct, 2010 03:54 PM

    Purplered's Avatar

    nope!! still waiting for any help or hint!

  5. 5 Posted by Stephen Orsini on 13 Apr, 2011 12:14 PM

    Stephen Orsini's Avatar

    This plugin looks great, but it doesn't look like it's supporting image maps (based on the lack of solutions here)
    I did find another that works nicely though... very lightweight and easy to impliment - check this out: http://www.vertigo-project.com/projects/vtip
    Good luck!

  6. 6 Posted by Patrick S. on 16 Jun, 2011 09:48 AM

    Patrick S.'s Avatar

    It works in Image Maps.
    You have to refresh the Tooltip position on mousemove (or one other event) with this jquery script :

    $(YOUR SELECTOR).mousemove(function(e) { $("#tiptip_holder").css('margin',0).css('position','absolute').css('left', e.pageX-40).css('top', e.pageY-40); });

  7. 7 Posted by Stephen Orsini on 16 Jun, 2011 11:50 AM

    Stephen Orsini's Avatar

    Ahh... nice. I'll try that out. Thanks for posting!

  8. 8 Posted by Clinton Green on 14 Sep, 2011 09:48 PM

    Clinton Green's Avatar

    Thanks Patrick S. that works like a charm. Just a note to all those who try it, you have to put that function in the body, it doesn't work from the head. Cheers

  9. 9 Posted by Patrick S. on 14 Sep, 2011 10:52 PM

    Patrick S.'s Avatar

    Sorry, but it works in the head. :-)
    Just add this function in the jquery 'document ready event'.
    Cheers

  10. 10 Posted by Clinton Green on 14 Sep, 2011 10:58 PM

    Clinton Green's Avatar

    Thanks for letting me know, cheers

  11. 11 Posted by Ares on 26 Jun, 2012 09:15 PM

    Ares's Avatar

    Please, can someone explain me how to use it with image maps?

  12. 12 Posted by Patrick on 29 Jun, 2012 09:56 AM

    Patrick's Avatar

    Depends on what you are trying.
    Maybe see example below and debug with Firebug.
    http://www.toitoidixi.de/en/standorte/index.php

    Actually you can use ttip directly on your image map. Just define the map, give a class to the area tags (+ set the title tag on all areas!). and call the jquery plugin $('.classname').tipTip();
    you may have to use the code of post #7 to reset the position of the Tooltip.

  13. 13 Posted by doli on 03 Sep, 2012 02:47 AM

    doli's Avatar

    Patrick, the problem happen after using this to image is, whenever user scroll too fast, from outside maps -> inside maps -> outside maps, its still showing the tiptip even if the cursor is not inside the maps anymore. Any idea?

    i use this :

    //process map function processMap(e, alwaysOn) {

    var data = e.data('maphilight') || {};
    data.alwaysOn = alwaysOn;
    e.data('maphilight', data).trigger('alwaysOn.maphilight');
    

    }

    //setup map tiptip function setupTipTip(e, c) {

    $(e).tipTip({ defaultPosition: 'left', content: c, keepAlive: true, exit: function () {
        clearMapAll();
    }, enter: function () {
        clearMapAll();
        processMap($(e), true);
    }
    }).mousemove(function (d) {
        $('#tiptip_holder').css('margin', 0).css('position', 'absolute').css('left', d.pageX - 40).css('top', d.pageY - 40);
        $('#tiptip_arrow').remove();
    });
    

    }

    function clearMapAll() {

    $('area').each(function (index) {
        var e = $('#zon' + (index + 1));
        processMap(e, false);
    })
    

    }

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac