twitter popover - apply different css class for different popovers

I am using bootstrap popover to display data when the user mouses over a link / checkbox/ data.

How do I add a separate css class in my html to different popovers to ensure that specific popovers are correctly displayed.

The css class that I want to add to my html code below is also shown below and called popover_margin_left.

Here is my html code:

<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>

Here is my 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;
}

Solution

If you add the following css classes to your custom.css page, then there can be different padding values used for the different data-placement values of the 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;
}

For example popovers with a data-placement="right" will be offset by 17px and data-placement="bottom" will be offset by 18px.

Also, the above css classes will apply a different background colors to the different data-placement values of the popovers so you can visually see the differnt css classes at work.

Hope that this helps.