Menu
I am designing a nav bar using jQuery and I want to display a tooltip with custom div elements on hover of the menu items. All these are dynamic and part of an api response.
Here is my code- 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)
});
});
My html file-
<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>
My 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;
}
It's getting rendered correctly but the only problem is tooltip div is shown on page load as well.It should be hidden initially and should be displayed only on menu list hover. Can someone help me understand where I am going wrong? Help much appreciated.
930
Well, you can use css here for hiding your lists.
div.tip-content.hidden {
display:none;
}
a.nav-link.tip:hover+div.tip-content.hidden {
display:block;
}
And don't use id="my-tip" for all of your blocks. Id must be unique on the page.
154
answered Nov 27 '25 12:11
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With