Theme overwrites and breaks .popover method

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;
}
.popover.top {
    margin-top: -10px;
}
.popover.top>.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;
}
.popover.top>.arrow:after {
    content: " ";
    bottom: 1px;
    border-width: 10px;
    margin-left: -10px;
    border-bottom-width: 0;
    border-top-color: #fff;
}
.popover-content {
    padding: 9px 14px;
}

Ben

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
$(e.element).popover({ 
    trigger: 'manual',
    container: 'body',
    html: true,
    content: content
});

$(e.element).popover('show');

// event leaveDayView
$(e.element).popover('hide');

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?

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: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css -> https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/scss/_transitions.scss

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.

Hey,
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', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js', array( 'jquery' ), 4.1, true );
	wp_enqueue_script( 'bootstrapjs', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', 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.

.collapse.show {
    height: auto;
}

Ben

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.