Bootstrap

Question

Ben başlık ve Bootstrap bir popover içeriğine Özel CSS uygulamak istediğiniz

yılında popover CSS uygulayın, ancak benim CSS gözardı ediliyor gibi görünüyor.

nasıl başlık ve sırasıyla içeriğe özel CSS uygulayabilirsiniz?

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

Örneğin

: http://jsfiddle.net/Mx4Ez/

Answer 1

nedeni javascript popover kendisi görüntülemek için yepyeni unsurlar yarattığını olduğu anlaşılıyor. Bu yeni öğeler orijinalinden farklı css sınıf adlarına sahiptir. sizin css için bu ekleme

Dene: Kullandığınız kütüphane sürümüne bağlı

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

Güncelleme

, isimler farklı olabilir. Yukarıdaki işe yaramazsa, bunun yerine .popover-header ve .popover-body kullanmayı deneyin.

Answer 2

yeni oluşturulan öğeleri şu hiyerarşi var: popover tetikler öğeden sonra enjekte edilir

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

(Eğer container seçeneği ayarlayarak enjekte popover için belirli bir konteyner belirtebilirsiniz, bu durumda stilleri kapsayıcı olarak geçirdiğiniz öğeyi kullanarak ayarlarsınız). Yani aşağıdaki örnekte olduğu gibi css kullanabileceği bir popover stil:

<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

sayfanızda birden popovers ve sadece başka bir sınıf eklemek için popover en template seçeneği artırabilen, bunlardan birini stil isterseniz:

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

sadece docs den template için varsayılan değeri kullanarak başladı ve sınıf özniteliği için my-specific-popover eklendi.