jQuery-用工具提示确认

Question

我正在对远程内容使用 jquery-confirm，并希望在 return 内容中使用 Bootstrap 工具提示。除了工具提示外，一切都按预期工作。

这是我的代码：

$(".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
      }
    }
  });
});

我的 remote_page 看起来像这样。我已经注释掉了我尝试过的内容。

<!-- 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>

我错过了什么？

Answer 1

问题与 jconfirm 的 z-index 样式属性有关。默认值高于工具提示。

为了解决这个问题，您可以稍微降低 jconfirm 值并将工具提示值设置得更高。

$(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/popper.js@1.16.0/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>

jQuery-用工具提示确认

jQuery-confirm with Tooltip

jquery

bootstrap-4

jquery-confirm