Применить CSS к popover в Bootstrap

Я хочу применить пользовательский CSS к заголовку и содержимому popover в Bootstrap, однако кажется, что мой CSS игнорируется.

Как я могу применить конкретный CSS к заголовку и содержимому соответственно?

$("#poplink").popover({
    html: true,
    placement: "right",
    trigger: "hover",
    title: function () {
        return $(".pop-title").html();
    },
    content: function () {
        return $(".pop-content").html();
    }
});

html, body {
    width: 100%;
    height: 100%;
}
.pop-div {
    font-size: 13px;
    margin-top: 100px;
}
.pop-title {
    display: none;
    color: blue;
    font-size: 15px;
}
.pop-content {
    display: none;
    color: red;
    font-size: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<div class="pop-div">
    <a id="poplink" href="javascript:void(0);">Pop</a>
    <div class="pop-title">Title here</div>
    <div class="pop-content">Content here</div>
</div>

Ответы

Ответ 1

Похоже, причина в том, что javascript создает совершенно новые элементы для отображения самого popover. Эти новые элементы имеют разные имена классов css, чем оригинал.

Попробуйте добавить это в свой css:

.popover-title {
    color: blue;
    font-size: 15px;
}
.popover-content {
    color: red;
    font-size: 10px;
}

Update

В зависимости от используемой вами версии библиотеки имена могут отличаться. Если вышеуказанное не работает, попробуйте вместо этого использовать .popover-header и .popover-body.

Ответ 2

Новые созданные элементы имеют следующую иерархию:

.popover
    |_  .popover-title
    |_  .popover-content

который вводится после элемента, который запускает popover (вы можете указать конкретный контейнер для введенного popover, установив опцию container, и в этом случае вы будете устанавливать стили с помощью элемента, который вы передали в качестве контейнера). Итак, чтобы создать popover, вы можете использовать css, как в следующем примере:

<div id="my-container">
  <a href="#" id="popover-trigger">Popover This!</a>
</div>

<style>
  .popover-title { color: green; }  /* default title color for all popovers */

  #my-container .popover-title { color: red; }  /* specific popover title color */
</style>

Ответ 3

Если у вас есть несколько popovers на вашей странице и вы хотите только создать один из них, вы можете использовать опцию popover template для добавления другого класса:

$("#myElement").popover({
  template: '<div class="popover my-specific-popover" role="tooltip">...'
});

Я начал с использования значения по умолчанию для template из docs и добавил атрибут my-specific-popover к атрибуту class.