javascript - 使用 html 的 bootstrap 3 工具提示不起作用

Question

我尝试在我的网站中使用 bootstrap 3 工具提示，并使用 html 显示工具提示的内容，但出现错误:无法读取未定义的属性“user”。

<div class="container">
  <a href="#" data-toggle="tooltip" data-idx="0">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="1">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="2">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="3">Hover over me</a>
  <a href="#" data-toggle="tooltip" data-idx="4">Hover over me</a>
</div>

$(document).ready(function() {
  var data = [{'user': "Amy"}, {'user': "Betty"}, {'user': "Cindy"}, {'user': "Debby"}, {'user': "Emily"}];
  setTooltip(data);
})

function setTooltip(data) {
  for (var i = 0; i < data.length; i++) {
    $('[data-idx="' + i + '"]').tooltip({
      html: true,
      title: function() {
        return "<p>User: " + data[i].user + "</p>";
      }
    });
  }
}

这是控制台中的结果:

有人遇到这个问题吗？谢谢。

Answer 1

您必须更新 setTooltip 函数:

function setTooltip(data) {
  for (var i = 0; i < data.length; i++) {
    const name = data[i].user;
    $('[data-idx="' + i + '"]').tooltip({
      html: true,
      title: "<p>User: " + name + "</p>"
    });
  }
}

工作 fiddle : https://jsfiddle.net/yqdhkcvz/10/