Bootstrap popover with manual trigger attached on dynamic content

Question

I have a dynamic set of contenteditable divs. Divs that have class ".showPopover", will have a popover. The popover trigger is set to manual, because I want them to appear on focus, but not always hide on blur.

I found here [question]: Bootstrap Tooltip with manual trigger and selector option that I can't use the "selector method" together with the manual trigger, so I followed one of the answers there, but the popover still doesn't appear for dynamically added divs.

The problem is, that I only want popover to appear for divs with specific class, which is not added together with the div.

The change of div's class for the popover is a bit simplified with an enable button.

jQuery(document).ready(function($) {

$('a.add').on('click', function(event) {
    event.preventDefault();
    $('.container').append('<p class="input" contenteditable="true"></p>');
});

$('a.enable').on('click', function(event) {
    event.preventDefault();
    $('.input').not('.showPopover').addClass('showPopover');
});

$('.container').on('focus', '.input.showPopover', function(event) {
    if (!$(this).data("bs.popover")) {                
        $(this).popover({
            placement:'right',
            trigger:'manual',
            html:true,
            content:'<a href="#" class="btn btn-danger">Remove</a>'
        });
    }
    $(this).popover('show');
});

var mousedownHappened = false;

$('.container').on('blur', '.input', function(event) {
    if(mousedownHappened) {
        mousedownHappened = false;
    } else {
        $(this).popover('hide');
    }
});

$('.container').on('mousedown', '.popover .btn', function(event) {
    mousedownHappened = true;
});

});

Jsfiddle: http://jsfiddle.net/Lh2rpj0f/2/

Jquery 1.11.1, Bootstrap 3.3.2

---

So thanks to Yenne Info, I've got a working solution: http://jsfiddle.net/Lh2rpj0f/4/

It might not be the best solution, but it does exactly what I wanted. (When I click the button inside popover, this popover is not destroyed when Enable button is clicked.)

---

As for now, my final solution: Bootstrap popover with manual trigger attached on dynamic content

Vinegarish

Answer 1

I updated my original code, and now it also works as I expected.

$('.container').on('focus', '.input.showPopover', function(event) {
    if (!$(this).data("bs.popover") || !$(this).attr('data-popoverAttached')) {
        $(this).popover('destroy').popover({
            placement:'right',
            trigger:'manual',
            html:true,
            content:'<a href="#" class="btn btn-danger">Remove</a>'
        });
        $(this).attr('data-popoverAttached', true);
    }
    $(this).popover('show');
});

JSfiddle: http://jsfiddle.net/Lh2rpj0f/5/

But still, I think there is something wrong inside the bootstrap popover code. I think the reason why my original code doesn't work, is that the bootstrap popover is somehow magically attaching (with default options!) to all my dynamically added divs (even though they doesn't have class .showPopover). Because of that, when focus fires, it doesn't pass through the if statement. The data-popoverAttached attribute solves this problem.

Vinegarish

Answer 2

As stated here you need to dynamically generate tooltips for each element. Follow the example given on the answer, binding mouseenter and mouseleave on the container and creating new tooltips if necesassary.

Ardis

Well the title of my question is probably not really accurate. When I give up the .showPopover class, it does work (just try to remove the .showPopover from focus event handler in the jsfiddle). So, as stated in the content of my question: The problem is, that I only want popover to appear for divs with specific class, which is not added together with the div. – Vinegarish

Answer 3

You can reset and set the popover...

Fiddle : http://jsfiddle.net/Lh2rpj0f/3/

JS :

    jQuery(document).ready(function($) {

$('a.add').on('click', function(event) {
    event.preventDefault();
    $('.container').append('<div class="input" contenteditable="true"></div>');
});

$('a.enable').on('click', function(event) {
    event.preventDefault();
    $('.input').not('.showPopover').addClass('showPopover');
    unset();set();
});

    set();

    function unset(){
        $('.input').popover('destroy');

    }


    function set(){
        $('.container').on('focus', '.input.showPopover', function(event) {
            if (!$(this).data("bs.popover")) {                
                $(this).popover({
                    placement:'right',
                    trigger:'manual',
                    html:true,
                    content:'<a href="#" class="btn btn-danger">Remove</a>'
                });
            }
            $(this).popover('show');
        });
        $('.container').on('blur', '.input', function(event) {
            if(mousedownHappened) {
                mousedownHappened = false;
            } else {
                $(this).popover('hide');
            }
        });

        $('.container').on('mousedown', '.popover .btn', function(event) {
            mousedownHappened = true;
        });
    }



var mousedownHappened = false;


});

Overtly

Well it does work, but when I have opened popover on one of the divs, then it would destroyed it. Is there a better solution? – Vinegarish

That's why I have the mousedown event. It occures before blur, so this way I can click the button inside the popover. – Vinegarish