Question

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

如何在html中将单独的css类添加到不同的弹出框中，以确保正确显示特定的弹出窗口。

我想要添加到下面的html代码中的css类也显示在下面并显示为 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;
}

例如，数据放置=“右”的弹出窗口将偏移17px，data-placement =“bottom”将偏移18px。

此外，上述css类将不同的背景颜色应用于弹出窗口的不同数据放置值，以便您可以在视觉上看到不同的css类在工作。

希望这会有所帮助。

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

1 个答案: