Как кто-то может показать элемент x при наведении курсора на элемент y и поместить его рядом с ним, используя jQuery? - PullRequest
Новая
       4

Как кто-то может показать элемент x при наведении курсора на элемент y и поместить его рядом с ним, используя jQuery?

0 голосов
/ 15 октября 2019

Я борюсь с привязкой одного элемента (всплывающей подсказки) к другому элементу. Элемент всплывающей подсказки должен появиться после того, как пользователь наведет курсор на другой элемент.

Моя идея состоит в том, чтобы настроить функцию наведения jQuery для управления свойством display.

Так что мои вопросы в основном:

  1. Как структурировать такую ​​функцию в jQuery? В данный момент при зависании нет никакого эффекта, даже когда я просто пытаюсь alert("Test") на зависании. Кажется, созданные элементы не распознаются указателем мыши.

  2. Как разместить элемент всплывающей подсказки рядом с исходным элементом при наведении курсора? (Прямо сейчас элементы всплывающей подсказки по умолчанию скрыты и не занимают никакого места в теле HTML)

Это часть JS, где пока не отображается эффект наведения(пример с одной подсказкой) 

$( "#id10" ).hover(
  function() {
    $( "#tooltip10" ).removeAttr("display");
  }, function() {
    $( "#tooltip10" ).css( "display:none" );
  }
);

И часть цикла, которая работает довольно хорошо: 

  $.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>';
        }

      // create tooltip container

      var tooltip = $('<table class="tooltip" style="display:none" id="tooltip' + response.api.fixtures[i].fixture_id +
       '"><tr><td>Hometeam</td>' +
        '<td>' + response.api.fixtures[i].goalsAwayTeam + '</td>' +
        '<td>3 (1)</td></tr>' +
        '<tr><td>hometeam</td>' +
        '<td>' + response.api.fixtures[i].goalsHomeTeam + '</td>' +
        '<td>2 (1)</td></tr>' +
        '<tr><td>Venue</td>' +
        '<td>Emirates</td></tr>' +
        '</table>`');

      $('.resultData').append(tooltip);

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

      });

Некоторые иллюстрации:

enter image description here

Воспроизводимый фрагмент кода: 

$("#id10").hover(
  function() {
    $("#tooltip10").css("display", null);
  },
  function() {
    $("#tooltip10").css("display", "none");
  }
);
#mainContent .resultData .tooltip {
  height: 100px;
  width: 100px;
}

#mainContent .resultData {
  padding-right: 6px;
  padding-left: 3px;
  padding-top: 6px;
  vertical-align: middle;
  float: left;
  z-index: -1;
}

#mainContent .datapointgreen {
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #00DC8E;
}
<body>
  <div id="mainContent">
    <table class="tooltip" style="display:none" id="tooltip10">
      <tr>
        <td>Hometeam</td>
        <td> Test </td>
        <td>3 (1)</td>
      </tr>
      <tr>
        <td>hometeam</td>
        <td> Test </td>
        <td>2 (1)</td>
      </tr>
      <tr>
        <td>Venue</td>
        <td>Emirates</td>
      </tr>
    </table>

    <div class="datapointgreen datapoint" id="id10"></div>

  </div>

</body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ответы [ 2 ]

2 голосов
/ 16 октября 2019

Ваши элементы визуализируются динамически, поэтому вы можете использовать $(document).on("mouseover","element",(){}) и $(document).on("mouseleave","element",(){})

Вы можете просто использовать функции show() и hide() (для отображения и скрытия всплывающей подсказки),

Как следует 

$(document).ready(function(){
  $(document).on("mouseover","#id10",function() {
      $("#tooltip10").show();
  });
    $(document).on("mouseleave","#id10",function() {
      $("#tooltip10").hide();
  });
})
#mainContent .resultData .tooltip {
  height: 100px;
  width: 100px;
}

#mainContent .resultData {
  padding-right: 6px;
  padding-left: 3px;
  padding-top: 6px;
  vertical-align: middle;
  float: left;
  z-index: -1;
}

#mainContent .datapointgreen {
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #00DC8E;
}
<body>
  <div id="mainContent">
    <div class="datapointgreen datapoint" id="id10"></div>
    <table class="tooltip" style="display:none" id="tooltip10">
      <tr>
        <td>Hometeam</td>
        <td> Test </td>
        <td>3 (1)</td>
      </tr>
      <tr>
        <td>hometeam</td>
        <td> Test </td>
        <td>2 (1)</td>
      </tr>
      <tr>
        <td>Venue</td>
        <td>Emirates</td>
      </tr>
    </table>


  </div>

</body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1 голос
/ 16 октября 2019

Я бы попробовал с: 

$("#id10").hover(
    function() {
        $("#tooltip10").css("display", "block");
    },
    function() {
        $("#tooltip10").css("display", "none");
    }
);

, тогда я сделал небольшое исправление для вас CSS: 

#mainContent .resultData .tooltip {
    height: 100px;
    width: 100px;
    position: absolute;
 }

#mainContent .resultData {
    padding-right: 6px;
    padding-left: 3px;
    padding-top: 6px;
    vertical-align: middle;
    float: left;
    z-index: -1;
}

#mainContent .datapointgreen {
    margin-left: 12px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #00DC8E;
}

И, наконец, ваш шаблон: 

<body>
  <div id="mainContent">
    <table class="resultData tooltip" style="display:none" id="tooltip10">
      <tr>
        <td>Hometeam</td>
        <td> Test </td>
        <td>3 (1)</td>
      </tr>
      <tr>
        <td>hometeam</td>
        <td> Test </td>
        <td>2 (1)</td>
      </tr>
      <tr>
        <td>Venue</td>
        <td>Emirates</td>
      </tr>
  </table>
  <div class="datapointgreen datapoint" id="id10"></div>

  </div>
</body>

Рабочий пример: скрипка

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

Нет похожих вопросов

...