0

I'm using jQuery Tooltipster tooltips with an image map but can't quite get it to behave properly. The tooltips pop up, but in the top left corner of my browser. Using the "offset" option in the javascript file does move it, but I don't think that's the best option. What's the proper way to use this plugin with image maps/area coordinates on an image?

Here's what I'm working with, hover over the left most orange or green circle to see what I'm talking about: http://willryan.us/test/#anatomyBox

Sparky
  • 98,165
  • 25
  • 199
  • 285
Will Ryan
  • 1,815
  • 4
  • 19
  • 21
  • Are there any issues you have with using the offset option? That is how I would have recommended doing it. – dev Jan 23 '13 at 23:26
  • I just tried again and now when I add offsetX and offsetY nothing shows up at all (tried with various dimensions). Before when I tried it it would move, but it wouldn't always be in the same spot (say if you scrolled a bit and hovered over it). That's why I thought it wasn't the best way of going about it. – Will Ryan Jan 23 '13 at 23:43
  • Please construct a jsFiddle demo. But including a demo link does not excuse having no code in your post. It's important to also show your code in case the links go dead. – Sparky Feb 13 '13 at 05:01

1 Answers1

1

My workaround for this case was to add an option to the plugin to detect mouse (pointer) position and make the tooltip appear near it. I called the option nearPointer and set its default to false.

These are the lines I added to the beta V4 version v4.0.0rc5

  1. First insertion is the option to set when defining the tooltipster in the main script.

    var pluginName = "tooltipster",
defaults = { (...)
    animation: 'fade',
    interactiveTolerance: 350,
    multiple: false,
    nearPointer: false, //added by mestrini
    offsetX: 0,
    offsetY: 0, (...)

  2. Second insertion is the code to get the mouse position by catching the mouse move event and store the coordinates. You can insert it right after the defaults options from above. I must mention that this snippet isn't originally mine but I can't recall from which corner of the web i got it from; so my apologies to the creator for not giving credit.

       // code added by mestrini
   document.onmousemove = getMousePosition;

   function getMousePosition(e) {
    var isIE = document.all? true:false;
    var _x, _y;

    if (isIE) {
        _x = event.clientX + document.body.scrollLeft;
        _y = event.clientY + document.body.scrollTop;
    } else {
        _x = e.pageX;
        _y = e.pageY;
    } 
    posX=_x;
    posY=_y;
  return true;
};

  3. Third insertion is made inside the reposition: function() where the map areas are calculated with the purpose to bypass them by checking the nearPointer option boolean value. Look for the the next line and add this code & !self.options.nearPointer

    if (self.$elProxy.is('area') & !self.options.nearPointer) {

  4. Final insertion is made before this comment // our function and global vars for positioning our tooltip in the vicinities of line 870.

    //  code added by mestrini
if (self.options.nearPointer){
    var paddY = 0, paddX = 0;
    switch (self.options.position) { //moving the tooltip a bit away from the pointer
        case 'top':
        paddY = 3;
        break;
        case 'bottom':
        paddY = -3;
        break;
        case 'right':
        paddX = -3
        break;
        case 'left':
        paddX = 3
        break;
    }
    proxy.offset.top = posY - paddY; //giving it some padding
    proxy.offset.left = posX - paddX;
    proxy.dimension.width = 0; //disregarding the plugin area calculations
    proxy.dimension.height = 0;
};
mestrini
  • 141
  • 1
  • 6