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

工作小提琴： https://jsfiddle.net/yqdhkcvz/10/

Answer 2

请尝试以下操作：

function setTooltip(data) {
  for (var i = 0; i < data.length; i++) {
    if($('[data-idx="' + i + '"]').length > 0){//Checking the element exists or not
      $('[data-idx="' + i + '"]').tooltip({
        title: "User: " + data[i].user 
      });
    }
  }
}

一切正常。

Answer 3

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <title>Tooltip Test</title>
</head>
<body>
<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>
</body>
</html>
$(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({
      title: "User: " + data[i].user
    });
  }
}

请尝试上述解决方案，它工作正常。我在您的代码中发现的问题是您正在使用 function（）设置工具提示，并且数据[i]在该范围内未定义。

经过测试的链接：https://jsbin.com/viyipewale/edit?html,js

使用HTML的bootstrap 3工具提示不起作用

3 个答案: