twitter popover - 为不同的 popovers 应用不同的 css class

Question

我正在使用 bootstrap popover 在用户将鼠标悬停在 link / 复选框/数据上时显示数据。

如何在我的 html 中为不同的弹出窗口添加单独的 css class 以确保正确显示特定的弹出窗口。

我想添加到我下面的 html 代码中的 css class 也显示在下面并称为 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 页面，则可以有不同的填充值用于弹出框的不同数据放置值。

.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;
}

例如，带有 data-placement="right" 的弹出窗口将偏移 17px，而 data-placement="bottom" 将偏移 18px。

此外，上面的 css 类将对弹出框的不同数据放置值应用不同的背景颜色，因此您可以直观地看到不同的 css 类在工作。

希望对您有所帮助。

twitter popover - 为不同的 popovers 应用不同的 css class

twitter popover - apply different css class for different popovers

html

css

twitter-bootstrap-3

popover