twitter popover - 針對不同的彈出式廣告應用不同的css類

Question

我使用bootstrap popover來顯示用戶將鼠標懸停在鏈接/複選框/數據上的數據。

如何在我的html中添加一個單獨的css類到不同的彈出窗口，以確保正確顯示特定的彈出窗口。

，我要添加到我下面的HTML代碼如下所示的和稱爲popover_margin_left的CSS類。

這裏是我的html代碼：

<span style="cursor: pointer;" 
     rel="popover" 
     data-content="{% trans 'The Test Details that should be included in your document is the data and information that you want displayed to all team members.' %} {% trans 'The Test Details that should be included in your document is the data and information that you want displayed to all team members.' %} {% trans 'The Test Details that should be included in your document is the data and information that you want displayed to all team members.' %}" 
     data-original-title="{% trans 'Test Details' %}" 
     data-placement="right"> 
    <input type="checkbox" name="TestDetails" checked="checked" readonly="true" disabled="false" class="checkbox_resize" >&nbsp; 
     {% trans "Test Details" %}</span> 
    </input> 
</span> 

這裏是我的CSS：

/* change default bootstrap popover width & z-index */ 
.popover { 
    direction: rtl; 
    min-width: 375px; 
    position: fixed; 
    word-break: normal; 
    word-wrap: break-word; 
    z-index: 9999; /* maintain a high z-index to bring the popover in the breadcrumbs forward */ 

    background-color: khaki; 
} 

.popover_margin_left { 
    margin-left: -12px; 
} 

Answer 1

如果添加以下CSS類到你的custom.css頁面，則可以有不同的填充值用於彈出不同的數據放置值。

.popover.bottom { 
    background-color: greenyellow; 
    margin-top: 18px; 
} 

.popover.right { 
    background-color: lightblue; 
    margin-left: 17px; 
} 

.popover.left { 
    background-color: gold; 
    margin-right: 0px; 
} 

.popover.top { 
    background-color: red; 
    margin-right: 10px; 
} 

對於具有一個數據放置示例popovers =「右」將被知識+和數據放置=偏移「底部」將被18像素偏移。

此外，上述css類將爲不同的背景顏色應用不同的彈出數據佈局值，以便您可以直觀地看到工作中不同的css類。

希望這可以幫助。