twitter popover - применить другой класс css для разных popovers

Question

Я использую bootstrap popover для отображения данных, когда пользователь мыши над ссылкой/checkbox/data.

Как добавить отдельный класс css в свой html для разных popovers, чтобы гарантировать, что определенные popovers будут правильно отображаться.

устанавливаемого сотовый класс, который я хочу добавить к моему HTML коду ниже также показан ниже, и называется popover_margin_left.

Вот мой 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, то есть могут быть разные значения обивка используется для разных значений размещения данных popovers.

.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 с данными-размещением = «вправо» будет компенсирован 17px и данные-размещение = «снизу» будет компенсирован 18px.

Кроме того, приведенные выше классы css будут применять различные цвета фона к различным значениям размещения данных для popovers, чтобы вы могли визуально видеть классы differnt css на работе.

Надеюсь, что это поможет.