Vấn đề định vị chú giải công cụ UI UI

Question

Tôi gặp sự cố định vị với chú giải công cụ của jQuery UI. Tôi không thích sử dụng jQuery UI, nhưng dự án tôi đang làm việc đã sử dụng nó trong suốt và nó được yêu cầu tôi thử và sử dụng nó, thay vì tích hợp tùy chọn ưa thích của tôi, qTip2.

Khi chú giải công cụ xuất hiện, nó sẽ tạo ra thanh cuộn dọc. Tôi đang định vị chú giải công cụ ở giữa mục tiêu và nó như tôi muốn, ngoại trừ vấn đề này.

$(function() { 
$(document).tooltip({ 
show: false, 
    hide: false, 
    position: { 
    my: "center bottom-20", 
    at: "center top", 
    using: function(position, feedback) { 
     $(this).css(position); 
     $("<div>") 
     .addClass("arrow") 
     .addClass(feedback.vertical) 
     .addClass(feedback.horizontal) 
     .appendTo(this); 
    } 
    } 
}); 
}); 

Tôi có thể thấy chú giải công cụ đang được định vị ở trên cùng: -600px mà tôi giả định là nguyên nhân khiến thanh cuộn xuất hiện.

Tôi đã thử thay đổi/xóa vị trí của chú giải công cụ, nhưng nó không có hiệu lực. Tôi đã thử gỡ bỏ các phần của CSS để xác định vấn đề và nó có vẻ liên quan đến padding (bất kỳ) hoặc chiều cao (min, max hoặc cố định).

Mặc dù xóa phần đệm và chiều cao khắc phục vấn đề, nhưng rõ ràng nó sẽ để lại chú giải công cụ tìm kiếm một chút ... Skinny. Tôi muốn tìm ra vấn đề là gì và cách nào xung quanh nó, vì vậy tôi có thể tạo kiểu cho chú giải công cụ.

CSS hiện tại của tôi (bao gồm chiều cao và đệm mà tôi có thể thấy gây ra sự cố) như sau (cũng có kiểu được đặt cho mũi tên mà tôi bỏ qua vì tôi có thể thấy chúng không gây ra bất kỳ sự cố nào):

.ui-tooltip { 
    z-index:10; 
    width:150px; 
    padding:10px; 
    min-height:20px; 
    max-width:100%; 
    font-size:0.875em; 
    text-align:center; 
    border-radius: 20px; 
    color:#707070; 
    background:#fffdc2 url(../img/fade.png) repeat-x; 
    font-family: 'Droid Sans', sans-serif; 
    text-shadow: 1px 1px #ffffff; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border:1px solid #e1e0aa;} 

Tôi biết giao diện người dùng jQuery có an open issue about connectors, vì vậy tôi đã thử nghiệm nó mà không có bất kỳ cài đặt định vị nào và không có sự khác biệt về điều này.

Tôi đã xem this issue được đề cập một vài lần, nhưng nó không liên quan vì tôi không có qTip hoặc bất kỳ thứ gì khác được bao gồm.

Tôi đã thiết lập JS fiddle here.

Tôi đánh giá cao bất kỳ trợ giúp hoặc lời khuyên nào.

Cảm ơn!

Answer 1

Nếu tôi hiểu chính xác những gì bạn mô tả là sự cố, thanh cuộn dọc được thêm vào vì thêm div ("# ui-tooltip-XX") được thêm vào phần thân của tài liệu với position: relative, chiếm thêm không gian. thuộc tính scrollHeight của cơ thể (và làm cho thanh cuộn xuất hiện). Nếu điều này "tương thích" với phần còn lại của HTML (mà tôi không có trong bài kiểm tra của tôi), bạn có thể phá vỡ vấn đề này bằng cách đặt thuộc tính position của chú giải công cụ thành absolute (không đóng góp cho chiều cao tổng thể của vùng chứa của nó) .

// Add this in your CSS 
.ui-tooltip, .arrow:after { 
    position: absolute; 
    .... 

(Dựa trên phần còn lại của HTML trên trang của bạn, thay đổi additonal có thể là cần thiết.)

Xem, cũng, đây short demo.

Answer 2

Đối với ứng dụng của tôi (trong đó có dụng cụ các mẹo trong các ô trong một DataTable jQuery bên trong các tab jQuery lồng nhau), chỉ cần thiết lập 'position: absolute' là không đủ - tôi cũng phải cung cấp cho các chú giải công cụ một vị trí trên cùng và bên trái trên màn hình ban đầu vì nó chỉ được định vị sau khi tạo:

.ui-tooltip 
{ 
    position: absolute; 
    top: 100px; left: 100px; 
}