Подсказка начальной загрузки 3 с использованием HTML не работает - PullRequest
Новая
       7

Подсказка начальной загрузки 3 с использованием HTML не работает

0 голосов
/ 23 мая 2019

Я пытаюсь использовать всплывающую подсказку bootstrap 3 на своем веб-сайте и использую html для отображения содержимого всплывающей подсказки, но получаю сообщение об ошибке: Невозможно прочитать свойство 'user' из undefined. 

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

Это результат в консоли:

enter image description here

У кого-нибудь есть эта проблема? Спасибо.

Ответы [ 3 ]

1 голос
/ 23 мая 2019

Вам нужно будет обновить функцию 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/

0 голосов
/ 23 мая 2019 
<!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
    });
  }
}

Пожалуйста, попробуйте вышеуказанное решение, оно работает нормально.Проблема, которую я обнаружил в вашем коде, заключалась в том, что вы использовали функцию () для установки всплывающей подсказки, и данные [i] не были определены в этой области.

Протестированная ссылка: https://jsbin.com/viyipewale/edit?html,js

0 голосов
/ 23 мая 2019

Пожалуйста, попробуйте следующее: 

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

Работает нормально.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...