Zastosuj CSS do popover w Bootstrapie

Question

Chcę zastosować niestandardowy styl CSS do tytułu i zawartości popover w Bootstrap, jednak wydaje mi się, że mój CSS jest ignorowany.

Jak zastosować specyficzny styl CSS odpowiednio do tytułu i treści?

$("#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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 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>

Na przykład: http://jsfiddle.net/Mx4Ez/

Answer 1

Przyczyną wydaje się być to, że JavaScript jest tworzenie zupełnie nowych elementów do wyświetlenia samego popover. Te nowe elementy mają różne nazwy klas css niż oryginały.

warto dodać to do Twojego CSS:

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

Aktualizacja

zależności od wersji biblioteki używasz, nazwy mogą być różne. Jeśli powyższe nie działa, spróbuj zamiast tego użyć .popover-header i .popover-body.

Answer 2

Nowo utworzone elementy mają następującą hierarchię:

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

który jest wtryskiwany po elemencie, który wyzwala popover (można określić konkretny pojemnik do zatłoczonego popover poprzez ustawienie opcji container, w którym to przypadku style zostaną ustawione przy użyciu elementu przekazanego jako kontener). Tak tytułować się popover można użyć CSS, jak w poniższym przykładzie:

<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> 

Answer 3

Jeśli masz wiele popovers na stronie i tylko chcą projektować jednego z nich można wykorzystać popover za template opcję, aby dodać kolejną klasę:

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

zacząłem używając tylko wartość domyślną dla template z docs i dodał my-specific-popover do atrybutu klasy.