Question

请你看看this Demo，让我知道为什么我不能根据他们的班级对每个弹出窗口应用风格？

以下是我的代码：CSS Rules as：

.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中使用popovers作为数据切换。使用工具提示。此外，bootstrap为工具提示生成3级html代码，您想要对div.tooltip.inner（第3级）进行样式化。样式工具提示root无法正常工作。

这是我知道在我的代码中工作的工具提示。我正在使用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

Answer 2

data-container="body"意味着popovers'元素不是<button>的兄弟，而是<body>的直接子元素，因此您的CSS兄弟选择器将不适用。

请考虑使用template工具提示选项。

向Bootstrap 3 Popovers添加样式的问题

2 个答案: