Как я могу создать всплывающие подсказки в цикле jQuery.each?

Question

У меня есть функция jQuery.each, работающая в функции успеха AJAX. Часть зацикливания создает HTML-контейнеры для каждого элемента в возвращенном наборе данных JSON.

Теперь я хотел бы создать всплывающую подсказку для каждого html-контейнера.

Почему-то у меня не возникает ошибок при отладке, но подсказка не отображается при наведении курсораHTML-контейнеры. Соответствующий идентификатор создается просто для того, чтобы html-контейнеры могли ссылаться на всплывающую подсказку, которая в конце также должна иметь соответствующий query.selector согласно моему коду (так что я думаю ...).

Это часть JavaScript:

  $.ajax({
    method: "GET",
    async: "True",
    dataType: "json",
    url: "https://cors-anywhere.herokuapp.com/https://www.api-football.com/demo/api/v2/fixtures/team/" + team_id,
    success: function(response) {

      $('.datapoint').remove();

      var responseData = response.api.fixtures;

      $.each(responseData, function(i) {

        if (team_id == response.api.fixtures[i].homeTeam.team_id) {
          var teamData = home;
        } else {
          var teamData = away;
        }

        if (response.api.fixtures[i].goalsHomeTeam > response.api.fixtures[i].goalsAwayTeam && teamData == home) {
          var resultDataPoint = '<div class="datapointgreen datapoint"' + 'id=id' + response.api.fixtures[i].fixture_id + '"></div>';
        } else if (response.api.fixtures[i].goalsHomeTeam > response.api.fixtures[i].goalsAwayTeam && teamData == away) {
          var resultDataPoint = '<div class="datapointred datapoint"' + 'id=id' + response.api.fixtures[i].fixture_id + '"></div>';
        } else if (response.api.fixtures[i].goalsHomeTeam < response.api.fixtures[i].goalsAwayTeam && teamData == away) {
          var resultDataPoint = '<div class="datapointgreen datapoint"' + 'id=id' + response.api.fixtures[i].fixture_id + '"></div>';
        } else if (response.api.fixtures[i].goalsHomeTeam < response.api.fixtures[i].goalsAwayTeam && teamData == home) {
          var resultDataPoint = '<div class="datapointred datapoint"' + 'id=id' + response.api.fixtures[i].fixture_id + '"></div>';
        } else {
          var resultDataPoint = '<div class="datapointblue datapoint"' + 'id=id' + response.api.fixtures[i].fixture_id + '"></div>';
        }

        new tippy('#id' + response.api.fixtures[i].fixture_id, {
          content: "Test"
        });

        $('.resultData').append(resultDataPoint);
      });