Support » Theme: Pinnacle » Theme overwrites and breaks .popover method

  • I’m using your Pinnacle theme (including the plugins Kadence Toolkit and Kadence Blocks – don’t know if this affects the issue).

    For a advanced feature I was looking to add the bootstrap popup functionality in a single page.

    The code looks like this:

    $(function () {
        container: 'body'


    Unfortunately the method .popover is calling a script of your theme instead of bootstrap/popper.js:

        var i = t.fn.popover;
        t.fn.popover = function(i) {
            return this.each(function() {
                var n = t(this)
                  , o ="bs.popover")
                  , s = "object" == typeof i && i;
                o ||"bs.popover", o = new e(this,s)),
                "string" == typeof i && o[i]()

    This results in that the popup isn’t shown. Why do you overwrite the function?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hey,
    This theme uses bootstrap. You can add a popover item by using rel="popover".

    For example:

    <a rel="popover" data-placement="top" data-content="Cras mattis est quis turpis sollicitudin, a auctor mauris laoreet. Integer sed tortor in felis mattis faucibus nec sit amet libero. In ornare dolor et lectus mollis vehicula id sed quam. Sed tincidunt lacus nec est imperdiet" data-original-title="Popover Title">Click Here</a>

    You could then style it with some css like this for example:

    .popover {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1010;
        display: none;
        max-width: 276px;
        padding: 1px;
        text-align: left;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ccc;
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 6px;
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
        box-shadow: 0 5px 10px rgba(0,0,0,.2);
        white-space: normal;
    } {
        margin-top: -10px;
    }>.arrow {
        left: 50%;
        margin-left: -11px;
        border-bottom-width: 0;
        border-top-color: #999;
        border-top-color: rgba(0,0,0,.25);
        bottom: -11px;
    .popover>.arrow {
        border-width: 11px;
    .popover-title {
        margin: 0;
        padding: 8px 14px;
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
        background-color: #f7f7f7;
        border-bottom: 1px solid #ebebeb;
        border-radius: 5px 5px 0 0;
    .popover>.arrow, .popover>.arrow:after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }>.arrow:after {
        content: " ";
        bottom: 1px;
        border-width: 10px;
        margin-left: -10px;
        border-bottom-width: 0;
        border-top-color: #fff;
    .popover-content {
        padding: 9px 14px;


    Thread Starter fireemerald


    Thanks for your fast response.

    I know that it’s possible with the rel and data attributes but that’s not what i asked for.

    My use case requires the dynamic approach like this, where the popup is generated and destroyed on-the-fly using javascript (jquery + bootstrap + Popper.js).

    // event enterDayView
        trigger: 'manual',
        container: 'body',
        html: true,
        content: content
    // event leaveDayView

    This code is supported by retail bootstrap but your theme overwrites the popover method and thus this code does not work as intended by bootstrap anymore. It’s kind of a bug?

    Thread Starter fireemerald


    I’ve tracked the error down and found the root cause.

    The popover dom element is created and attached to the container (body):
    <div class="popover fade right in" style="top: 508px; left: 1194.25px; display: block;">...<div>

    But the problem is, this element is not visible. It’s because the css class show is never added to the dom element and without the show class assigned, this rule takes effect:

    .fade:not(.show) {
        opacity: 0;

    CSS rule source: ->

    As you can see the rule is from the default bootstrap style. It does conflict with your overwritten functions from popover. I added this import because i wanted to use the bootstrap styling.

    My question is now:
    – Do you really overwrite many (all?) of the popover methods via prototype (setContent, hasContent, show, …) or do i see this wrong and you just included them inside the kt_plugins.min.js file from the original?
    – Do you know a way to restore the default behavior?

    Last but not least is there a option to get the un-minified version of kt_plugins.min.js used instead the minified one – it’s kind of triggering me.

    The bootstrap in the theme is version 3 which is why that is happening, part of the breaking changes in 4.

    I may just pull bootstrap all out to prevent this kind of interference. It was added for convenience back in the day. I’ll see about pushing an update out without it.

    You can load your version later, after kt_plugins file is loaded and then your bootstrap would take precedence. For example:

     * Enqueue scripts
    function custom_scripts() {
    	wp_enqueue_script( 'popperjs', '', array( 'jquery' ), 4.1, true );
    	wp_enqueue_script( 'bootstrapjs', '', array( 'jquery' ), 4.1, true );
    add_action( 'wp_enqueue_scripts', 'custom_scripts', 110 );

    Just be sure to add this css for the updated collapse so the mobile menu works. {
        height: auto;


    Thread Starter fireemerald


    So i ended up with this:

    • Leave everything as it is and don’t try to overwrite bootstrap or popperjs (it’s conflicting on one or another end).
    • Included the css classes for .popover from bootstrap 4.

    The popover is working as intended and has the look of bootstrap 4.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Theme overwrites and breaks .popover method’ is closed to new replies.