jquery - 如何使用自定义 div 元素在 Jquery 中显示工具提示
问题描述
我正在使用 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 也会在页面加载时显示。它最初应该被隐藏,并且应该只在菜单列表悬停时显示。有人可以帮助我了解我哪里出错了吗?非常感谢帮助。
解决方案
好吧,你可以在这里使用 css 来隐藏你的列表。
div.tip-content.hidden {
display:none;
}
a.nav-link.tip:hover+div.tip-content.hidden {
display:block;
}
并且不要对所有块使用 id="my-tip" 。ID 在页面上必须是唯一的。
推荐阅读
- microcontroller - 带有 GSM 模块的 PIC 微控制器
- asp.net - 使用 Javascript 渲染 React JS 组件
- spring - 为什么 Spring bean 必须是可序列化的?
- python-2.x - 为什么 41 == 0041 的结果在 python 中给出 False?
- amazon-web-services - 使用 Amazon lambda 函数和 API Gateway 创建 API
- git - 拉分支后的 Intellij 身份验证错误
- javascript - 添加新行时在顶部滚动表格
- python - 散点图多类标签
- amazon-dynamodb - 使用相同的 DynamoDB 属性作为 HASH 和 RANGE 键
- php - 两个面板之间的php会话问题