Tự động định vị chú giải công cụ Bootstrap (cho các thành phần được tạo động)

Question

Tôi đang sử dụng Chú giải công cụ được cung cấp bởi Twitter Bootstrap (http://twitter.github.com/bootstrap/javascript.html#tooltips).

Tôi có một số đánh dấu được chèn động trong DOM của tôi cần kích hoạt chú giải công cụ. Đó là lý do tại sao tôi kích hoạt tooltips theo cách sau (https://github.com/twitter/bootstrap/issues/4215):

$('body').tooltip({ 
    delay: { show: 300, hide: 0 }, 
    selector: '[rel=tooltip]:not([disabled])' 
}); 

Để tránh tooltips được đặt quá gần với cạnh của màn hình, tôi cần để có thể đặt vị trí của chúng dựa trên vị trí yếu tố kích hoạt chú giải công cụ. Tôi đã nghĩ đến việc đó theo cách sau:

$('body').tooltip({ 
     delay: { show: 300, hide: 0 }, 
     // here comes the problem... 
     placement: positionTooltip(this), 
     selector: '[rel=tooltip]:not([disabled])' 
    }); 



function positionTooltip(currentElement) { 
    var position = $(currentElement).position(); 

    if (position.left > 515) { 
      return "left"; 
     } 

     if (position.left < 515) { 
      return "right"; 
     } 

     if (position.top < 110){ 
      return "bottom"; 
     } 

    return "top"; 
} 

Làm cách nào để chuyển giá trị hiện tại phù hợp cho mỗi vị trí công cụ?

Cảm ơn trước

Answer 1

Bootstrap gọi hàm vị trí với params trong đó bao gồm các phần tử

this.options.placement.call(this, $tip[0], this.$element[0]) 

như vậy trong trường hợp của bạn, làm điều này:

$('body').tooltip({ 
    delay: { show: 300, hide: 0 }, 
    placement: function(tip, element) { //$this is implicit 
     var position = $(element).position(); 
     if (position.left > 515) { 
      return "left"; 
     } 
     if (position.left < 515) { 
      return "right"; 
     } 
     if (position.top < 110){ 
      return "bottom"; 
     } 
     return "top"; 
    }, 
    selector: '[rel=tooltip]:not([disabled])' 
}); 

Answer 2

Tùy chọn placement trong tài liệu cho phép chức năng. Nó không phải là tài liệu (mà tôi có thể tìm thấy) những gì các đối số trong chức năng. Điều này dễ dàng xác định tuy nhiên bằng cách đăng nhập arguments để điều khiển.

Đây là những gì bạn có thể sử dụng:

$('body').tooltip({ 

    placement: function(tip, el){ 
    var position = $(el).position(); 
     /* code to return value*/ 

    } 

/* other options*/ 
}) 

Answer 3

cái này làm việc cho tôi

$("[rel=tooltip]").popover({ 
      placement: function(a, element) { 
       var position = $(element).parent().position(); 
       console.log($(element).parent().parent().is('th:first-child')); 

       if ($(element).parent().parent().is('th:last-child')) { 
        return "left"; 
       } 
       if ($(element).parent().parent().is('th:first-child')) { 
        return "right"; 
       } 
       return "bottom"; 
      }, 

     }); 

Answer 4

Đây là cách tôi đặt tooltip của tôi trong Bootstrap 2.3.2

placement: function (tooltip, trigger) { 
    window.setTimeout(function() { 
     $(tooltip) 
      .addClass('top') 
      .css({top: -24, left: 138.5}) 
      .find('.tooltip-arrow').css({left: '64%'}); 

     $(tooltip).addClass('in'); 
    }, 0); 
} 

Về cơ bản những gì tôi đang nói ở đây là rằng tooltip của tôi sẽ được đặt trên đầu với một số tùy chỉnh bù đắp, cũng là mũi tên hình tam giác nhỏ ở phía dưới sẽ hơi ở bên phải.

Cuối cùng, tôi thêm lớp in hiển thị chú giải công cụ.

Cũng lưu ý rằng mã được bao bọc trong hàm setTimeout 0.

Answer 5

$(element).position() sẽ không hoạt động bình thường nếu tùy chọn container được đặt thành chú giải công cụ.

Trong trường hợp của tôi, tôi sử dụng container : 'body' và phải sử dụng $(element).offset() để thay thế.

Answer 6

Đây là viết tắt mà tôi sử dụng để xác định chiều rộng cửa sổ nhỏ 768 hay không, sau đó thay đổi vị trí tooltip từ trái sang hàng đầu:

placement: function(){return $(window).width()>768 ? "auto left":"auto top";}