mirrors/notebook
3
0
Fork 0
mirror of https://github.com/indentlabs/notebook.git synced 2025-10-26 11:19:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace slow title tooltips with instant CSS tooltips

Browse Source 
Replace browser's default title tooltips (which have a 1-2 second delay) with custom CSS tooltips that appear instantly on hover. Uses data-tooltip attribute with CSS ::after pseudo-elements for immediate feedback.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andrew Brown 2025-09-30 01:08:51 -07:00
parent 85311361b7
commit 6c79c223fa
1 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/views/content/edit.html.erb
View File

@ -84,8 +84,8 @@
class="hidden lg:block fixed left-0 z-40"
style="top: 132px;">
<button @click="toggleLeftSidebar()"
class="bg-notebook-blue hover:bg-blue-600 text-white p-2 rounded-r-md shadow-lg transition-all duration-300 flex items-center gap-1"
title="Show Navigation"
class="bg-notebook-blue hover:bg-blue-600 text-white p-2 rounded-r-md shadow-lg transition-all duration-300 flex items-center gap-1 tooltip-right"
data-tooltip="Show Navigation"
aria-label="Show Navigation">
<i class="material-icons text-base">menu</i>
<i class="material-icons text-base">chevron_right</i>
@ -148,8 +148,8 @@
class="hidden lg:block fixed right-0 z-40"
style="top: 132px;">
<button @click="toggleRightSidebar()"
class="bg-notebook-blue hover:bg-blue-600 text-white p-2 rounded-l-md shadow-lg transition-all duration-300 flex items-center gap-1"
title="Show Page Tools"
class="bg-notebook-blue hover:bg-blue-600 text-white p-2 rounded-l-md shadow-lg transition-all duration-300 flex items-center gap-1 tooltip-left"
data-tooltip="Show Page Tools"
aria-label="Show Page Tools">
<i class="material-icons text-base">chevron_left</i>
<i class="material-icons text-base">construction</i>
@ -346,8 +346,6 @@ function editPageController() {
const universeName = selectedOption ? selectedOption.text : '';
const universePrivacy = selectedOption ? selectedOption.dataset.universePrivacy : 'private';
console.log('Universe changed to:', universeId, universeName, 'Privacy:', universePrivacy);
// Update the Alpine.js reactive state
self.universePrivacy = universePrivacy;
@ -779,4 +777,44 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
});
</script>
</script>
<style>
/* Instant CSS Tooltips */
.tooltip-left,
.tooltip-right {
position: relative;
}
.tooltip-left::after,
.tooltip-right::after {
content: attr(data-tooltip);
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 8px 12px;
background-color: rgba(0, 0, 0, 0.9);
color: white;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
border-radius: 6px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease-in-out;
z-index: 1000;
}
.tooltip-left::after {
right: calc(100% + 8px);
}
.tooltip-right::after {
left: calc(100% + 8px);
}
.tooltip-left:hover::after,
.tooltip-right:hover::after {
opacity: 1;
}
</style>