trái Positioning Một Bootstrap Popover

Question

Tôi có một popover xuất hiện ở bên trái của một nhãn:

$('label').hover(function() { 
       $(this).popover({ 
        offset: 10, 
        placement: 'left' 
       }).popover('show'); 

Các popover hiện đang chặn một nút radio và tôi muốn chuyển nó sang trái, nói, 10px. Tôi không thể tìm ra cách để làm điều này. bù đắp dường như không làm gì cả (Nếu tôi thêm 10 hoặc 10000 nó không tạo sự khác biệt). Dưới đây là HTML cho một nhãn như:

<label for="MainContent_Wizard1_rbLeader" id="MainContent_Wizard1_lblLeader" class="radio" data-original-title="Visionary Giving Level" data-content="Diamond (full-page ad) + 2 dinner tickets">Visionary ($250,000)<span class="radio" name="rbLeader"><input id="MainContent_Wizard1_rbLeader" type="radio" name="ctl00$MainContent$Wizard1$GivingLevel" value="rbLeader" onclick="WizardStep1_Click();" /></span></label> 

tôi có thể cố gắng thiết lập vị trí popover bằng cách ghi đè các lớp trong CSS với một cái gì đó như:

.popover { 
    left: 380px !important; 
} 

nhưng điều này là xa lý tưởng như nó xuất hiện ở các vị trí khác nhau bằng cách sử dụng các trình duyệt khác nhau.

Có phải là cách thêm một lề phải nhỏ, phải không?

Cảm ơn.

Answer 1

Dường như không thể tạo kiểu cho một cửa sổ bật lên đơn lẻ và - như Sara đề cập - không có tùy chọn nào như offset (bạn có thể nghĩ đến qtip?). Tuy nhiên, bạn có thể sử dụng tùy chọn không có giấy tờ template, "có nguồn gốc" từ các tùy chọn tooltip (trên thực tế, cửa sổ bật lên chỉ giới thiệu content).

Bằng cách sửa đổi template bạn có thể tạo kiểu riêng từng cửa sổ bật lên! Dường như với tôi vấn đề của bạn là hơn arrow hơn popover chính nó, vì vậy bạn có thể cố gắng để di chuyển mũi tên lên hoặc xuống từ giữa, chỉ đơn giản bằng cách thêm một phong cách cho mũi tên để mẫu, như thế này

$('label').hover(function() { 
    $(this).popover({ 
     placement: 'left', 
     template: '<div class="popover"><div class="arrow" style="top:65px;"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
    }).popover('show'); 
}); 

tất nhiên, ở đây mũi tên cho tất cả các popovers được đặt cho tất cả các nhãn sẽ được sửa đổi do $('label').hover, nhưng popovers có thể được tạo kiểu riêng mà không cần CSS nếu bạn muốn, những nút không có nút radio có thể không cần.

CẬP NHẬT - phong cách toàn bộ popover + 10px bên trái

... 
template: '<div class="popover" style="margin-left:-10px;"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
... 

Answer 2

Hãy thử này để thêm lề phải:

.popover.left{ 
    left: calc(100% - 10px) !important; 
} 

Answer 3

Bạn có thể thêm dữ liệu vị trí = 'left' để phần tử .