jQuery-confirm with Tooltip

Question

I'm using jquery-confirm with remote content and would like to use Bootstrap Tooltip in the return content. Everything works as expected except for the tooltip.

Here is my code:

$(".div-link").click(function(){
  var $this = $(this),
    $cjstate = $this.data("cjstate");
  $.confirm({
    title: $cjstate.toUpperCase(),
    content: 'url:<?=site_url('main/remote_page/')?>'+$cjstate,
    contentLoaded: function(data, status, xhr){
      $('[data-toggle="tooltip"]').tooltip(); // TRIE INIT TOOLTIP HERE - DIDN'T WORK
    },
    onContentReady: function () {
      $('[data-toggle="tooltip"]').tooltip(); // TRIE INIT TOOLTIP HERE - DIDN'T WORK
    },
    columnClass: 'medium',
    buttons: {
      Close: function(){
        // close window
      }
    }
  });
});

My remote_page looks like this. I have commented out what I had tried.

<!-- TRIED THIS AND IT DIDN'T WORK -->
<!-- <link rel="stylesheet" href="<?=site_url('assets/css/custom.css');?>"> -->
<table id="cjtbl" class="table table-sm">
  <thead>
    <tr>
      <th class="bg-primary">PowerBI Report</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($results as $item) :?>
        <tr>
          <td><a href="<?=$item['link'];?>" data-toggle="tooltip" data-placement="top" title="Tooltip on top" target="_blank"><?=$item['report'];?></a></td>
        </tr>
    <?php endforeach;?>
  </tbody>
</table>
<script type="text/javascript">
    //$('[data-toggle="tooltip"]').tooltip(); // TRIE INIT TOOLTIP HERE - DIDN'T WORK
</script>

What am I missing?

Answer 1

The issue is related to the z-index style attribute of jconfirm. The default value is higher than tooltip.

In order to solve this you can decrease a bit the jconfirm value and set the tooltip value to higher.

$(document).on('inserted.bs.tooltip', function () {
    $('.tooltip').css('z-index', 99999999);
});


$(".div-link").on('click', function (e) {
    var $this = $(this),
            $cjstate = $this.data("cjstate");
    $.confirm({
        title: $cjstate.toUpperCase(),
        content: 'url:https://gist.githubusercontent.com/gaetanoma/52b7700fd55d6530e62bc75bb031779a/raw/4fadb244611ef247b3f4583ae5cdd3f04feda1ed/popoveronjconfirm.txt',
        onContentReady: function () {
            this.$contentPane.closest('.jconfirm').css('z-index', 99999990);
            setTimeout(function () {
                $('[data-toggle="tooltip"]').tooltip(); // TRIE INIT TOOLTIP HERE - DIDN'T WORK
            }, 500);
        },
        columnClass: 'medium',
        buttons: {
            Close: function () {
                // close window
            }
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

<button class="div-link" data-cjstate="This is the state">Click me</button>