CODEWITHSUNDEEP
jquerytooltiptooltipster
Will Ryan
Will Ryan

Reputation: 1825

Change position of Tooltipster tooltip on image map

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

Upvotes: 0

Views: 2243

Answers (1)

mestrini
mestrini

Reputation: 141

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;
};

Upvotes: 1

Related Questions