Question

0

How to re-position a Bootstrap Popover after dynamic content insertion?

rated 0 times [ 2] [ 2] / answers: 1 / hits: 26528 / 10 Years ago, tue, may 6, 2014, 12:00:00

So basically whenever I am loading a Bootstrap Popover with an empty content option and inserting content into it dynamically, the popover loses its correct position.

For example:

$('td.chartSection').each(function () {

    var $thisElem = $(this);

    $thisElem.popover({

        placement: 'top',

        trigger: 'hover',

        html: true,

        container: $thisElem,

        delay: {

            hide: 500

        },

        content: ' '

    });

});



//After popup is shown, run this event

$('td.chartSection').on('shown.bs.popover', function () {

    var $largeChart = $(this).find('.popover .popover-content');



    //Insert some dummy content

    $largeChart.html(dfjhgqrgf regqef  f wrgb wrbgqwtgtrg <br /> wfghjqerghqreg fbvwqbtwfbvfgb <br />efgwetrg);

});

My Question:

Is there a method that can recalculate the popovers position such as $('td.chartSection').popover('recalculate').

Or is there another way to re-position the popover without manually doing this with CSS styles?

WORKING DEMO

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cadendericki

Add To Favorites

Follow

Total Points: 482

Total Questions: 109

Total Answers: 103

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

cadendericki questions

1 ERROR TypeError: Cannot read properties of undefined (reading 'phones')

Tue, Mar 22, 22, 00:00, 2 Years ago

1 firefox browser does not start in playwright

Wed, Apr 7, 21, 00:00, 3 Years ago

1 React Creating Dynamic Select and Option Elements with Material-UI

Wed, Jan 27, 21, 00:00, 3 Years ago

1 How to use the vue router in another file?

Wed, Jul 8, 20, 00:00, 4 Years ago

1 Format column header dates in FullCalendar

Thu, May 14, 20, 00:00, 4 Years ago

View All

answered 10 Years ago turnerf · Accepted Answer

No, there isn't a recalculate and there's really no easy way to do it. That said, you can dynamically inject the popovers this way:

$('td.chartSection').on('mouseenter', function() {

    var myPopOverContent = 'This is some static content, but could easily be some dynamically obtained data.';

    $(this).data('container', 'body');

    $(this).data('toggle', 'popover');

    $(this).data('placement', 'top');

    $(this).data('content', myPopOverContent);

    $(this).popover('show');

});



$('td.chartSection').on('mouseout', function() {

    $(this).popover('hide');

});

Just replace all of your js in your fiddle with the above and check it out...