bootstrap popover not work in jquery load function

Question

I have a specific problem with bootsrap popover.

All jquery and bootstrap files are included in file index.php, in this same file i have this div:

<div id="con"> Loadding </div>

And I have a jquery function which loads a content from php file

 $(document).ready(function(){
  var auto_refresh = setInterval(
  function()
  {

  $('#con').load('ajax/some.php');
  }, 1000);
});

In some.php file I have link with to activate a bootstrap popover.

        echo ' <a href="#" 
        class="pop-tel" 
        data-html="true" 
        data-container="body" 
        data-trigger="hover" 
        data-placement="bottom" 
        data-content="Tel: xxx" 
        data-original-title="';     
    echo    'Test">'; 
    echo 'Some one</a>';

the content from some.php will work great, but bootstrap popover doesn't show.

Can you help me?

Try to check here http://stackoverflow.com/questions/10226851/how-to-update-bootstrap-popover-text — zer02, Sep 12 '13 at 21:36
@zer02 thx for answer, but this not i need, i must active popover from .load content -> some.php file popover — timber.km, Sep 12 '13 at 22:50

score 2 · Accepted Answer · answered Dec 19 '17 at 18:18

When adding a tooltip to, say a button, according to bootstraps documentation, you'd end up with something like this (within the external file you're using Jquery Load to return).

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip info here">Some Button</button>

Within your Jquery callback, you can initialize all tooltips. This is according to Bootstrap's Documentation for "opt-in" Bootstrap Tooltip Examples

Your callback for Jquery Load would then look like this

  $('#con').load('ajax/some.php', function() {
    $('[data-toggle="tooltip"]').tooltip()

  });

bootstrap popover not work in jquery load function

1 Answers1