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

我使用鼠标在链接/复选框/数据上移动时显示数据

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

下面还显示了我要添加到html代码中的css类，该类名为popover\u margin\u 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类添加到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类将对Popover的不同数据放置值应用不同的背景色，以便您可以直观地看到不同的css类在工作

---

希望这能有所帮助。

我想你可以在html中添加

class:popover\u margin\u right

。把它添加到你想添加的标签上。我已经试过了。除非你的意思不同——也许你可以给我举个例子。你用的是

！重要信息

在css中，如

.popover\u margin\u left{margin left:-12px！重要信息；}

始终避免使用

！重要信息

@user1261774如果可以的话，创建一个JSFIDLE，这将更有帮助Amit singh-但是如何将css类应用于popover？？

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