Css 关于向Bootstrap 3弹出窗口添加样式的问题

你能不能看一看，让我知道为什么我不能应用风格的每一个流行的基础上，他们的类

以下是我的代码：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引导的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>

红色流行音乐
绿色流行音乐
黄色流行音乐
无颜色PO

您可以使用弹出框作为HTML中的数据切换。使用工具提示。此外，引导程序会为工具提示生成3级html代码，您需要对div.tooltip.inner进行样式化（第3级）。设置工具提示根目录的样式无效

下面是我知道在我的代码中起作用的工具提示。我用的更少：

<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

data container=“body”
意味着popover元素不是
的同级元素，而是
的直接子元素，因此您的CSS同级选择器将不适用

考虑改用
模板
工具提示选项