Chú giải công cụ giao diện người dùng jQuery - Cách đặt đúng vị trí theo chiều dọc ở giữa chuột?

Question

Cập nhật: Vẫn đang tìm kiếm giải pháp khả thi, nhưng hãy kiểm tra câu trả lời của tôi bên dưới, nó có thể giúp bạn hoặc đưa ra ý tưởng. Nó hoạt động cho một độ phân giải cụ thể.

Tôi đang sử dụng jQuery UI tooltips plugin nhưng tôi m gặp sự cố khi định vị chú giải công cụ theo cách tôi muốn.

Tôi muốn nó được căn giữa theo chiều dọc, nhưng chỉ ở bên trái phần tử được đề cập. Tôi tin rằng tôi đang diễn đạt một cách chính xác, nhưng tôi sẽ chỉ cho bạn một bức tranh về ý tôi.

(đây là những gì nó nên được làm)
http://prntscr.com/v2yqi

Như bạn có thể thấy trong ví dụ của tôi, nó tập trung theo chiều dọc để các yếu tố bản thân, không phải là chuột.

Nếu nó có thể di chuyển bằng chuột (chỉ theo dõi theo chiều dọc) sẽ hoàn hảo. Không chắc chắn nếu điều này là có thể với plugin này. Tôi không thực sự hiểu được positioning API của họ.

Và đây là JSFiddle.

$(function() { 
    $(document).tooltip({ 
     items: ".entry", 
     position: { my: "center", at: "left" }, 
     content: function() { 
     var element = $(this); 
     if ((element.is(".entry"))) { 
      return "<div class='hi'>This is a very nice entry! It's so pretty and I feel  like I can touch it. This is just random filler text to give you the idea..</div>"; 
     } 
     } 
    }); 
}); 

Tôi thực sự đánh giá cao bất kỳ thông tin chi tiết nào bạn có thể cho tôi về điều này. Cảm ơn trước.

Answer 1

Đã kết thúc nhận nó làm việc bằng cách thêm một lớp tùy chỉnh, theo dõi, và position: fixed:

Javascript:

$(function() { 
     $(document).tooltip({ 
      items: ".entry", 
      position: { 
       my: "right bottom+50" 
      }, 
      tooltipClass: "entry-tooltip-positioner", 
      track: true, 
      content: function() { 
       var element = $(this); 
       if ((element.is(".entry"))) { 
        return "<div class='hi'>This is a very nice entry! It's so pretty and I feel like I can touch it. This is just random filler text.</div>"; 
       } 
      } 
     }); 
    }); 

CSS:

.entry { 
    position: relative; 
    right: -200px; 
    width: 500px; 
} 
.entry-tooltip-positioner { 
    position: fixed !important; 
    left: -130px !important; 
} 

Và cập nhật JSFiddle

Hy vọng rằng đây sẽ giúp người khác ra đôi khi.

Answer 2

Bạn có thể sử dụng track: true, nhưng tôi nghĩ rằng jQuery tooltip không phải là rất dễ sử dụng và linh hoạt = ( Các bạn đã thử qTip2?

http://jsfiddle.net/5XWaB/2/