Anwenden von CSS auf den Popover in Bootstrap

Ich möchte benutzerdefinierte CSS auf den Titel und den Inhalt eines Popover in Bootstrap anwenden, aber es scheint, dass mein CSS ignoriert wird.Anwenden von CSS auf den Popover in Bootstrap

Wie kann ich bestimmte CSS auf den Titel bzw. den Inhalt anwenden?

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

Zum Beispiel: http://jsfiddle.net/Mx4Ez/

Quelle

2013-07-26 MLister

Der Grund scheint zu sein, dass die Javascript brandneue Elemente schafft sich die popover anzuzeigen. Diese neuen Elemente haben andere CSS-Klassennamen als das Original.

versuchen, dies zu Ihrem CSS hinzufügen:

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

aktualisieren

auf der Bibliotheksversion Je Sie verwenden, können die Namen unterschiedlich sein. Wenn das obige nicht funktioniert, verwenden Sie stattdessen .popover-header und .popover-body.

Quelle

2013-07-26 15:14:08

Irgendeine Möglichkeit, es nur auf ein bestimmtes "Popover" anzuwenden? Ich hoffte auf etwas in der Art von: .popover ({templateCss: {...}}) '. – Domi

Eine gute Möglichkeit, dies zu tun, ist mit Stylesheets. Ich würde es persönlich vermeiden, die Stile über Javascript zu setzen, um zu vermeiden, dass ich .popover (..) mehrmals aufrufen muss. Hier ist eine Geige, wie ich es tun würde: http://jsfiddle.net/n8e92k4n/11/ –

Ich benutze Angular. Wenn also Popover eine "css" -Option (oder besser noch eine "class" -Option) hätte, würde die [Angular Bootstrap UI] (http://angular-ui.github.io/bootstrap/#/popover) das ermöglichen diese Anpassungen in der Angular-Vorlage. JS würde nicht berührt werden :) – Domi

Die neu erstellten Elemente haben die folgende Hierarchie:

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

, die nach dem Element injiziert wird, der die popover auslöst (Sie, indem Sie die container Option, um einen bestimmten Container für die injizierten popover angeben können, in welchem Fall Sie legen die Stile mit dem Element fest, das Sie als Container übergeben haben. So ein popover stylen Sie css wie das folgende Beispiel verwenden können:

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

Quelle

2015-06-22 18:13:27 isapir

Wenn Sie auf Ihrer Seite mehrere popovers haben und wollen nur eine von ihnen, um Stil, können Sie die template Option des popover nutzen eine andere Klasse hinzuzufügen:

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

begann ich nur für template vom docs den Standardwert verwenden, und hinzugefügt my-specific-popover der Klasse Attribut.

Quelle

2017-01-13 14:41:01 jobo3208

Anwenden von CSS auf den Popover in Bootstrap

Antwort

Verwandte Themen