twitter popover - 为不同的 popover 应用不同的 css 类答案

【问题标题】：twitter popover - apply different css class for different popoverstwitter popover - 为不同的 popover 应用不同的 css 类
【发布时间】：2015-08-28 04:50:16
【问题描述】：

当用户将鼠标悬停在链接/复选框/数据上时，我使用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;
}

【问题讨论】：

我认为您可以将class:popover_margin_right 添加到您的html。将其添加到您要添加的标签中。
我试过了。除非你的意思不同——也许你可以给我举个例子。
你在你的css中使用!important像.popover_margin_left { margin-left : -12px!important; }
总是尽量避免使用!important ！！ @user1261774 如果可以的话，创建一个 JSFiddle 会更有帮助
amit singh - 但是如何将 css 类应用于弹出框？？

标签： html css twitter-bootstrap-3 popover

【解决方案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 类的工作情况。

希望这会有所帮助。

【讨论】：