it-swarm.asia

تطبيق 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="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>

على سبيل المثال: http://jsfiddle.net/Mx4Ez/

43
MLister

يبدو أن السبب هو أن جافا سكريبت تقوم بإنشاء عناصر جديدة لعرض المنبثق نفسه. هذه العناصر الجديدة لها أسماء فئة css مختلفة عن الأصل.

حاول إضافة هذا إلى المغلق الخاص بك:

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

تحديث

بناءً على إصدار المكتبة الذي تستخدمه ، قد تكون الأسماء مختلفة. إذا لم يعمل ما سبق ، فحاول استخدام .popover-header و .popover-body في حين أن.

65
Matt Pinkston

العناصر التي تم إنشاؤها حديثًا لها التسلسل الهرمي التالي:

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

الذي يتم حقنه بعد العنصر الذي يؤدي إلى ظهور النوافذ المنبثقة (يمكنك تحديد حاوية محددة لمايكل النوافذ المنبثقة الذي تم حقنه عن طريق تعيين الخيار 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>
8
isapir

إذا كان لديك العديد من النوافذ المنبثقة على صفحتك وتريد فقط تصميم نمط واحد منهم ، فيمكنك الاستفادة من خيار template popover لإضافة فئة أخرى:

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

لقد بدأت باستخدام القيمة الافتراضية لـ template من docs ، وأضفت my-specific-popover إلى سمة الفصل.

6
jobo3208