引导程序弹出窗口显示错误的元素 [英] bootstrap popover showing in the wrong element

问题描述

我试图在单击时使用引导程序弹出窗口. 我首先在js onReady的开头进行初始化. 然后，我添加了一个显示选项，但将其附加到错误的dom元素上. 应该将其放置在wrapper元素中.

I'm trying to use the bootstrap popover on a click. I first initalize at the start of my js onReady. Then I add a show option but it appends it to the wrong dom element. It should be placing it in the wrapper element.

var wrapper = $(".modal .modal-wrapper");
wrapper.popover({trigger:'manual', title:"WORKING TOOLTIP", selector:wrapper});

然后在单击按钮时调用它.

Then this is called on a click of a button.

var showTooltip = function( ){
    wrapper.popover('show');
}

问题在于，弹出框未在包装div中显示，而是在body元素中显示.如何使它显示在wrapper元素内部.

The issue is the popover is not showing inside the wrapper div its showing in the body element instead. how can I get it to show inside the wrapper element.

推荐答案

selector属性仅在由插件触发时才用于委托事件.

The selector attribute only serves for delegated events if triggered by the plugin.

首先，此选择器 将如果设置trigger: 'manual'，则不使用 .

First of all, this selector will not be used if you set trigger: 'manual'.

然后，如果(例如)您拥有trigger: 'hover'并具有该标记:

Then, if (for example) you have trigger: 'hover' and have that markup :

<div class="megadiv">
    <button class="btn">Hover me</button>
</div>

以下javascript将绑定一个弹出窗口，以显示在任何悬停的.btn

The following javascript will bind one popup to appear on any hovering .btn

$('.megadiv').popover({
    selector: '.btn',
    content: 'content',
    title: 'title'    
});

实时演示(jsfiddle)

这仅适用于.megadiv的子元素.为此，请参见 jQuery.on文档.

And this only applies to child elements of .megadiv. See the jQuery.on doc for that.

当事件直接发生在绑定元素上时，不调用处理程序，而仅对与选择器匹配的后代(内部元素)进行调用.

The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector.

这篇关于引导程序弹出窗口显示错误的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！