Динамически ссылаться и обновлять заголовок / текст popover через JQuery (с Bootstrap 4) - НЕ по ID

Question

Итак, вот пример кода, с которым я работаю:

// Show popover
$("div.e").popover({
  selector: '.eqp',
  trigger: 'click',
  title: 'Loading...'
}).on('shown.bs.popover', function(e) {
  var popover_data_eid = $(e.target).data("eid");
  var bodyEl = $(".popover").find(".popover-body");
  var titleEl = $(".popover").find(".popover-header");
  // Show spinner while waiting for data to be fetched
  bodyEl.html("<div class='d-flex justify-content-center'><div class='spinner-border text-secondary' role='status'><span class='sr-only'>Loading...</span></div></div>");

  $.getJSON("http://ipinfo.io/" + popover_data_eid)
    .done(function(data) {
      var result = '';
      if (data.org) {
        result += data.org + '<br>';
      }
      if (data.city) {
        result += data.city + ', ';
      }

      if (data.region) {
        result += data.region + ' ';
      }
      if (data.country) {
        result += data.country;
      }
      if (result == '') {
        result = "No details found.";
      }
      bodyEl.html(result);
      titleEl.html("Further details");
    }).fail(function(data) {
      result = "No details found.";
      bodyEl.html(result);
    });
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>




<br />
<div class="e" style="margin-left: 20px;">
  <a href="#" class="eqp" data-eid="141.101.1.19">Details (1)</a>
  <br />
  <br />
  <a href="#" class="eqp" data-eid="181.131.3.69">Details (2)</a>
  <br />
  <br />
  <a href="#" class="eqp" data-eid="121.161.3.63">Details (3)</a>
</div>

У меня могут быть сотни потенциальных элементов данных на странице для размещения во всплывающем окне (генерируется динамически, как показано на рисунке), и никогда не указывается идентификатор длявсплывающее окно.

Как я могу сослаться на поповер "$ (this)" против простого нахождения всех их по классам, как это:

  var bodyEl = $(".popover").find(".popover-body");
  var titleEl = $(".popover").find(".popover-header");

Заранее спасибо!

Answer 1

Ссылка на свойство "tip" всплывающего окна. Вот так:

var popover = $(e.target).data('bs.popover');
var tip = $(popover.tip);

var bodyEl = tip.find(".popover-body");

Тогда вы можете обратиться к этому конкретному поповеру.