Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix sidebar tooltips so they don't show when expanded

Browse source
This commit is contained in:
Eli Ribble 2026-02-17 14:58:38 +00:00
parent 55553eb6a6
commit d536458280
No known key found for this signature in database
2 changed files with 48 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

42
html/template/sync/component/sidebar.html
View file

@ -11,7 +11,12 @@
<ul class="sidebar-menu">
<li>
<a href="/" data-toggle="tooltip" data-placement="right" title="Home">
<a
href="/"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Home"
>
<div class="menu-icon"><i class="bi bi-house"></i></div>
<span class="menu-text ms-2">Home</span>
</a>
@ -19,8 +24,8 @@
<li>
<a
href="/admin"
data-toggle="tooltip"
data-placement="right"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Admin Dashboard"
>
<div class="menu-icon"><i class="bi bi-headset"></i></div>
@ -30,8 +35,8 @@
<li>
<a
href="/notification"
data-toggle="tooltip"
data-placement="right"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Notifications"
>
<div class="menu-icon"><i class="bi bi-bell"></i></div>
@ -53,8 +58,8 @@
<li>
<a
href="/message"
data-toggle="tooltip"
data-placement="right"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Messages"
>
<div class="menu-icon"><i class="bi bi-chat-dots"></i></div>
@ -64,8 +69,8 @@
<li>
<a
href="/pool"
data-toggle="tooltip"
data-placement="right"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Pools"
>
<div class="menu-icon"><i class="bi bi-water"></i></div>
@ -75,8 +80,8 @@
<li>
<a
href="/radar"
data-toggle="tooltip"
data-placement="right"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Radar"
>
<div class="menu-icon"><i class="bi bi-radar"></i></div>
@ -86,8 +91,8 @@
<li>
<a
href="/service-request"
data-toggle="tooltip"
data-placement="right"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Service Requests"
>
<div class="menu-icon"><i class="bi bi-person-raised-hand"></i></div>
@ -97,8 +102,8 @@
<li>
<a
href="/setting"
data-toggle="tooltip"
data-placement="right"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Settings"
>
<div class="menu-icon"><i class="bi bi-gear"></i></div>
@ -106,7 +111,12 @@
</a>
</li>
<li>
<a href="#" data-toggle="tooltip" data-placement="right" title="Help">
<a
href="#"
data-bs-toggle="tooltip"
data-bs-placement="right"
title="Help"
>
<div class="menu-icon"><i class="bi bi-question-circle"></i></div>
<span class="menu-text ms-2">Help</span>
</a>

33
html/template/sync/layout/authenticated.html
View file

@ -20,7 +20,22 @@
<link rel="icon" href="/static/favicon-sync.ico" type="image/x-icon" />
{{ block "extraheader" . }}{{ end }}
<script>
var tooltipByElementId = {};
function setTooltipsForSidebar() {
const sidebarTooltips = document.querySelectorAll(
'#sidebar [data-bs-toggle="tooltip"]',
);
const isExpanded = document
.getElementById("content")
.classList.contains("expanded");
sidebarTooltips.forEach((t) => {
const tooltip = bootstrap.Tooltip.getOrCreateInstance(t);
if (isExpanded) {
tooltip.enable();
} else {
tooltip.disable();
}
});
}
document.addEventListener("DOMContentLoaded", function () {
var popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="popover"]'),
@ -35,13 +50,10 @@
);
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
let t = new bootstrap.Tooltip(tooltipTriggerEl);
if (tooltipTriggerEl.id != "") {
tooltipByElementId[tooltipTriggerEl.id] = t;
console.log("added tooltip to", tooltipTriggerEl.id);
}
return t;
});
console.log("Initialized ", tooltipTriggerList.length, " tooltips");
setTooltipsForSidebar();
});
</script>
</head>
@ -58,12 +70,11 @@
</div>
<script src="/static/vendor/js/bootstrap.bundle.min.js"></script>
<script>
document
.getElementById("sidebarToggle")
.addEventListener("click", function () {
document.getElementById("sidebar").classList.toggle("collapsed");
document.getElementById("content").classList.toggle("expanded");
});
document.getElementById("sidebarToggle").addEventListener("click", () => {
document.getElementById("sidebar").classList.toggle("collapsed");
document.getElementById("content").classList.toggle("expanded");
setTooltipsForSidebar();
});
</script>
</body>
</html>