Positioning a Tooltip

Question

Hello guys, I'm trying to make my tooltips pop up in the left side of the cursor instead of the right side, with a jquery plugin called EasyTooltip.

I'm trying to give a negative value in the header's call, which aim would be to affect the x-axis positioning, but with no effects (nothing appears, while a positive value in both axis shall normally work) :

<script type="text/javascript">
$(document).ready(function() {

    $(".middle img").easyTooltip({
     tooltipId: "easyTooltip2",
     xOffset: -300,
     yOffset: 50
    });
});
</script>

I'm quite new to javascript, and I think that I'd have to hack the script, but I would need your advice here. This is the script :

/*
 *  Easy Tooltip 1.0 - jQuery plugin
 *  written by Alen Grakalic 
 *  http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
 *
 *  Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *  Dual licensed under the MIT (MIT-LICENSE.txt)
 *  and GPL (GPL-LICENSE.txt) licenses.
 *
 *  Built for jQuery library
 *  http://jquery.com
 *
 */

(function($) {

    $.fn.easyTooltip = function(options){

     // default configuration properties
     var defaults = { 
      xOffset: 10,  
      yOffset: 20,
      tooltipId: "easyTooltip",
      clickRemove: false,
      content: "",
      useElement: ""
     }; 

     var options = $.extend(defaults, options);  
     var content;

     this.each(function() {      
      var title = $(this).attr("title");    
      $(this).hover(function(e){                      
       content = (options.content != "") ? options.content : title;
       content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
       $(this).attr("title","");               
       if (content != "" && content != undefined){   
        $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");  
        $("#" + options.tooltipId)
         .css("position","absolute")
         .css("top",(e.pageY - options.yOffset) + "px")
         .css("left",(e.pageX + options.xOffset) + "px")      
         .css("display","none")
         .fadeIn("fast")
       }
      },
      function(){ 
       $("#" + options.tooltipId).remove();
       $(this).attr("title",title);
      }); 
      $(this).mousemove(function(e){
       $("#" + options.tooltipId)
        .css("top",(e.pageY - options.yOffset) + "px")
        .css("left",(e.pageX + options.xOffset) + "px")     
      }); 
      if(options.clickRemove){
       $(this).mousedown(function(e){
        $("#" + options.tooltipId).remove();
        $(this).attr("title",title);
       });    
      }
     });

    };

})(jQuery);

Many thanks for any input. Cheers,

Answer 1

try alert((e.pageX + options.xOffset) + "px") after the css is applied in $(this).hover function, it might come back with NaNpx for some reason, else it might be shooting the tooltip off the left of the screen with -300, have you tried -1, -10, -100?

Also parseInt(options.xOffset) might help you out.

Just guessing here as it all looks ok in the script you quoted.

Answer 2

Actually just using a value like -200 will fix the left side of the tooltip but start causing probalems when you have more tooltip content. So, a better way to do this would be to determine the tooltip width with contents, then adjust the size (here is a demo). You'll have to change the plugin and css a tiny bit:

CSS

#easyTooltip{
 padding:5px 10px;
 border:1px solid #195fa4;
 background:#195fa4 url(bg.gif) repeat-x;
 color:#fff;
 position: absolute;
 top:0;
 left: -9999px;
}

Script:

Replace this:

.css("left",(e.pageX + options.xOffset) + "px")

with this (in two places)

.css("left",(e.pageX - $('#'+ options.tooltipId).width() - options.xOffset - 20) + "px")

The tooltip needs to be positioned off the screen because if you had it set as display:none the width would return as zero. In the script you are subtracting the width of the tooltip, the offset and the width of the cursor (the 20) from the current mouse position to position the tooltip.