如何使用自定义 div 元素在 Jquery 中显示工具提示

Question

我正在使用 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 在页面加载时显示，因为 well.It 最初应该隐藏并且应该只在菜单列表悬停时显示。有人可以帮助我了解我哪里出错了吗？非常感谢帮助。

Answer 1

好吧，您可以在此处使用 css 来隐藏您的列表。

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

并且不要对所有块都使用 id="my-tip"。 ID在页面上必须是唯一的。

Answer 2

我会隐藏 .tip css 使用：

display: none;

然后我会使用 jQuery .hover() 来显示和隐藏提示：

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

如何使用自定义 div 元素在 Jquery 中显示工具提示

How to display a tooltip in Jquery with custom div elements

html

css

jquery

scss-mixins