CODEWITHSUNDEEP
jquerytwitter-bootstrap
Chapsterj
Chapsterj

Reputation: 6625

bootstrap popover showing in the wrong element

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');
}

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.

Upvotes: 0

Views: 4335

Answers (2)

Sherbrow
Sherbrow

Reputation: 17379

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

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

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

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

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

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

Live demo (jsfiddle)

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.

Upvotes: 2

wirey00
wirey00

Reputation: 33661

Try it like this. I think the selector property takes a string not an object

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

from http://www.w3resource.com/twitter-bootstrap/popover-tutorial.php

selector

Type of the value of the selector is string, default value is false. Tooltip objects are delegated to the given target by using this.

Upvotes: 1

Related Questions