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

【问题标题】：How to display a tooltip in Jquery with custom div elements如何使用自定义 div 元素在 Jquery 中显示工具提示
【发布时间】：2019-09-23 09:59:17
【问题描述】：

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

【问题讨论】：

您可以使用.hover() 函数和css display: none 规则来实现您的目标。

标签： jquery html css scss-mixins

【解决方案1】：

嗯，你可以在这里使用 css 来隐藏你的列表。

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

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

【讨论】：

这确实处理了 tooltipWrapper 的隐藏和显示，但是，它看起来不像工具提示，即带有尖箭头。我在代码中遗漏了什么吗？
是的，你可以。关于箭头...显示您的 css。
已添加css，请查看。
我在这里没有看到任何箭头样式。为什么要显示，在哪里显示？
我还没有添加。一旦我将鼠标悬停在菜单项上，我希望 css 呈现工具提示的外观。

【解决方案2】：

我会隐藏 .tip css 使用：

display: none;

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

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

【讨论】：