css - 将样式添加到 Bootstrap 3 Popovers 的问题

Question

你能看看this Demo吗？并让我知道为什么我不能根据它们的类将样式应用于每个弹出窗口？

这是我的代码:CSS 规则为:

.red + .popover > .popover-content {
    background-color: red;
}
.red + .tooltip > .tooltip-arrow {
    border-bottom-color:red;
}

.green + .popover > .popover-content {
    background-color: green;
}
.green + .tooltip > .tooltip-arrow {
    border-bottom-color:green;
}

.yellow + .popover > .popover-content {
    background-color: yellow;
}
.yellow + .tooltip > .tooltip-arrow {
    border-bottom-color:yellow;
}

和 HTML - Bootstrap Popover 标记

<button type="button" class="btn btn-default red" data-container="body" data-toggle="popover" data-placement="bottom" data-content="This is Red Pop.">
  Red POP
</button>

<button type="button" class="btn btn-default green" data-container="body" data-toggle="popover" data-placement="bottom" data-content="This is Green Pop.">
  Green POP
</button>

<button type="button" class="btn btn-default yellow" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Yellow POP
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  No Color PO
</button>

Answer 1

您在 HTML 中使用弹出框作为数据切换。使用工具提示。此外，bootstrap 会为工具提示生成 3 级 html 代码，您想要对 div.tooltip.inner(第 3 级)进行样式化。样式工具提示根不起作用。

这是我知道在我的代码中有效的工具提示。我正在使用 LESS:

<li class="my-toolbar-item" data-placement="top" data-toggle="tooltip" title="Object 300w x 200h"</li> 

div.tooltip {
    position:                                                       absolute;
    z-index:                                                        100;
    width:                                                          140px;

    &.top div.tooltip-arrow {
        height:                                                     5px;
        top:                                                        88%;
        border-left:                                                4px solid transparent;
        border-right:                                               4px solid transparent;
        border-top:                                                 6px solid rgb(251, 159, 0);
    }
    & div.tooltip-inner {
        width:                                                      140px;
        height:                                                     30px;
        line-height:                                                26px;
        font-size:                                                  12px;
        font-weight:                                                400;
        color:                                                      #fff;
        .border-radius(2px);
        .background-image(linear-gradient(to bottom, rgb(255, 214, 52) 0%,rgb(251, 159, 0) 100%));

    }
} // div.tooltip.top