Applicare i CSS al popover in Bootstrap

Question

Desidero applicare CSS personalizzati al titolo e al contenuto di un popover in Bootstrap, tuttavia, sembra che il mio CSS venga ignorato.

Come posso applicare specifici CSS rispettivamente al titolo e al contenuto?

$("#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>

Ad esempio: http://jsfiddle.net/Mx4Ez/

Answer 1

Il motivo sembra essere che il javascript è la creazione di nuovi elementi per visualizzare la popover stesso. Questi nuovi elementi hanno nomi di classi css diversi rispetto all'originale.

Prova ad aggiungere questo alla tua CSS:

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

Aggiornamento

A seconda della versione della libreria che si sta utilizzando, i nomi possono essere diversi. Se quanto sopra non funziona, prova a utilizzare .popover-header e .popover-body.

Answer 2

Gli elementi appena creati hanno la seguente gerarchia:

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

quale viene iniettato dopo l'elemento che scatena il popover (è possibile specificare un contenitore specifico per la popover iniettato impostando l'opzione container, nel qual caso imposterai gli stili usando l'elemento che hai passato come contenitore). Così per lo stile un popover è possibile utilizzare i CSS come il seguente esempio:

<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

Se si dispone di più popovers sulla tua pagina e desidera solo per lo stile uno di loro, è possibile sfruttare l'opzione del popover template per aggiungere un'altra classe:

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

ho iniziato da solo utilizzando il valore predefinito per template dal docs, e ha aggiunto my-specific-popover per l'attributo class.