Как отобразить всплывающую подсказку в Jquery с пользовательскими элементами div - PullRequest
Новая
       25

Как отобразить всплывающую подсказку в Jquery с пользовательскими элементами div

3 голосов
/ 05 мая 2019

Я проектирую навигационную панель с использованием jQuery и хочу отобразить всплывающую подсказку с пользовательскими элементами div при наведении курсора на пункты меню. Все они динамичны и являются частью API-ответа.

Вот мой код main.js 

$( document ).ready(function() {
  fetch('https://jsonblob.com/api/jsonBlob/6766327f-607d-11e9-95ef-9bcb815ba4a4', {mode: 'cors'})
    .then(function(response) {
      return response.json();
    })
    .then(function(returnedValue) {
      console.log('Request successful', returnedValue);
      var menuListEmpty = '';
      $.each(returnedValue, function (index) {
        console.log(index);
        var subMenuListItems = '';
        $.each(returnedValue[index], function(key, value){
            subMenuListItems += '<div><h3 class="linkTitle">'+value.title+'</h3><p class="linkSub">'+value['sub-title']+'</p></div>'

        })
        var tooltipWrapper = '<div id="my-tip" class="tip-content hidden">'+subMenuListItems+'</div>'
        menuListEmpty += '<li class="nav-item"><a class="nav-link tip" data-tip="my-tip"href="#">'+ index +'</a>'+tooltipWrapper+'</li>'  
         // Tooltips
         $('.tip').each(function () {
          $(this).tooltip({
              html: true,
              title: $('.' + $(this).data('tip')).html()
          });
        }); 
      })
     $('.customNav').append($( '<nav class="navbar navbar-expand-lg"><ul class="navbar-nav mr-auto">' +menuListEmpty+ '</ul></nav>'));
     })
    .catch(function(error) {
      console.log('Request failed', error)
   });
});

Мой HTML-файл- 

<body>
   <div class="container-lg">
    <header class="customNav"></header>
   </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="main.js"></script>
  </body>

Мой scss- 

.customNav {
  font-family: Camphor,Open Sans,Segoe UI,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: 0;
  top: 10px;

    .linkTitle {
      margin: 0;
      color: #6772e5;
      font-size: 16px;
      line-height: 22px;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: .025em;
    }

    .linkSub {
      font-size: 15px;
      line-height: 22px;
      color: #6b7c93;
      margin: 5px 0 0;
      display: block;
      white-space: nowrap;
    }

    .tip {
      text-transform: capitalize;
    }
}

div.tip-content.hidden {
  display:none;
  transform: translateX(406px);
  height: 643px;
  width: 494px;
}
a.nav-link.tip:hover+div.tip-content.hidden {
  display:block;
}

Он отображается правильно, но единственной проблемой является то, что подсказка div также отображается при загрузке страницы. Первоначально она должна быть скрыта и отображаться только при наведении списка меню. Может кто-нибудь помочь мне понять, где я иду не так? Помощь очень ценится.

Ответы [ 2 ]

2 голосов
/ 05 мая 2019

Ну, вы можете использовать css здесь, чтобы скрыть свои списки. 

div.tip-content.hidden {
  display:none;
}
a.nav-link.tip:hover+div.tip-content.hidden {
  display:block;
}

И не используйте id = "my-tip" для всех ваших блоков.Идентификатор должен быть уникальным на странице.

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

Я бы скрыл .tip css используя: 

display: none;

Тогда я бы использовал jQuery .hover (), чтобы показать и скрыть подсказки:

https://api.jquery.com/hover/

...