工具提示指針向下顯示在超鏈接的左側

Question

我已經使用了提示工具提示插件。我想顯示鏈接左側的工具提示。我使用了下面的代碼。
工具提示正確指向其左側的鏈接。但問題是它的指針不指向鏈接。它指向下方。如何解決這個問題？

JS/HTML

$('.tip').tipsy({gravity: 'e'}); 

<a class='tip' href='index.php' title='test'>Test</a> 

(function($) { 
$.fn.tipsy = function(options) { 

    options = $.extend({}, $.fn.tipsy.defaults, options); 

    return this.each(function() { 

     var opts = $.fn.tipsy.elementOptions(this, options); 

     $(this).hover(function() { 

      $.data(this, 'cancel.tipsy', true); 

      var tip = $.data(this, 'active.tipsy'); 
      if (!tip) { 
       tip = $('<div class="tipsy lefttip"><div class="tipsy-inner"/></div>'); 
       tip.css({position: 'absolute', zIndex: 100000}); 
       $.data(this, 'active.tipsy', tip); 

      } 

      if ($(this).attr('title') || typeof($(this).attr('original-title')) != 'string') { 
       $(this).attr('original-title', $(this).attr('title') || '').removeAttr('title'); 
      } 

      var title; 
      if (typeof opts.title == 'string') { 
       title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title); 
      } else if (typeof opts.title == 'function') { 
       title = opts.title.call(this); 
      } 

      tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback); 

      var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight}); 
      tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity 
      tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body); 
      var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight; 
      var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity; 

      switch (gravity.charAt(0)) { 
       case 'n': 
        tip.css({top: pos.top + pos.height, left: pos.left + pos.width/2 - actualWidth/2}).addClass('tipsy-north'); 
        break; 
       case 's': 
        tip.css({top: pos.top - actualHeight, left: pos.left + pos.width/2 - actualWidth/2}).addClass('tipsy-south'); 
        break; 
       case 'e': 
        tip.css({top: (pos.top + pos.height/2 - actualHeight/2)+5, left: pos.left - actualWidth}).addClass('tipsy-east'); 
        break; 
       case 'w': 
        tip.css({top: pos.top + pos.height/2 - actualHeight/2, left: pos.left + pos.width}).addClass('tipsy-west'); 
        break; 
      } 

      if (opts.fade) { 
       tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 0.8}); 
      } else { 
       tip.css({visibility: 'visible'}); 
      } 

     }, function() { 
      $.data(this, 'cancel.tipsy', false); 
      var self = this; 
      setTimeout(function() { 
       if ($.data(this, 'cancel.tipsy')) return; 
       var tip = $.data(self, 'active.tipsy'); 
       if (opts.fade) { 
        tip.stop().fadeOut(function() { $(this).remove(); }); 
       } else { 
        //tip.remove(); 
       } 
      }, 100); 

     }); 

    }); 

}; 

// Overwrite this method to provide options on a per-element basis. 
// For example, you could store the gravity in a 'tipsy-gravity' attribute: 
// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' }); 
// (remember - do not modify 'options' in place!) 
$.fn.tipsy.elementOptions = function(ele, options) { 
    return $.metadata ? $.extend({}, options, $(ele).metadata()) : options; 
}; 

$.fn.tipsy.defaults = { 
    fade: false, 
    fallback: '', 
    gravity: 'n', 
    html: false, 
    title: 'title' 
}; 

$.fn.tipsy.autoNS = function() { 
    return $(this).offset().top > ($(document).scrollTop() + $(window).height()/2) ? 's' : 'n'; 
}; 

$.fn.tipsy.autoWE = function() { 
    return $(this).offset().left > ($(document).scrollLeft() + $(window).width()/2) ? 'e' : 'w'; 
}; 

})(jQuery); 

CSS

.tipsy { 
    margin-top:-5px!important; 
    padding: 5px; 
    font-size: 10px; 
    background-repeat: no-repeat; 
    background-image: url(../images/btn/tip.png)!important; 
} 
.tipsy-inner { 
    vertical-align:middle; 
    padding: 8px 12px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
    border-radius:3px; 
    background-color: #3a3333; 
    color: white; 
    max-width: 200px; 
    text-align: center; 
    font-weight:bold; 
    font-size:12px; 
} 
.tipsy-north { 
    background-position: top center; 
} 
.tipsy-south { 
    background-position: bottom center; 
} 
.tipsy-east { 
    background-position: right center; 
} 
.tipsy-west { 
    background-position: left center; 
} 

Answer 1

問題是最有可能與您使用的.tipsy

我用下面，它的做工精細試圖圖像：

.tipsy { 
    margin-top:-5px!important; 
    padding: 5px; 
    font-size: 10px; 
    background-repeat: no-repeat; 
    background-image: url('http://www.laurafeld.com/2010-In-the-woods/Images/20px-TriangleArrow-Right.svg.png')!important; 
    // above just an example image I grabbed from a quick search 
} 

HERE IS A DEMO

編輯：我看到你最近的修改之後，我知道你想動態生成圖像，所以我建議你從.tipsy刪除background-image和不同的圖像添加到每個.tipsy-east， .tipsy-west ...如下：

.tipsy-north { 
    background-position: top center; 
    background-image: url('/images/path/down_arrow.jpg')!important; 
} 
.tipsy-south { 
    background-position: bottom center; 
    background-image: url('/images/path/up_arrow.jpg')!important; 
} 
.tipsy-east { 
    background-position: right center; 
    background-image: url('/images/path/right_arrow.jpg')!important; 
} 
.tipsy-west { 
    background-position: left center; 
    background-image: url('/images/path/left_arrow.jpg')!important; 
} 

UPDATED DEMO

注：的我用的是不是真的那些圖片，你必須創建/搶你的每一個方向和添加。