diff --git a/frontend/app.js b/frontend/app.js
index 503e0db..6fb92ca 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -1839,7 +1839,7 @@ function noteApp() {
                                     <path d="M6 4l4 4-4 4V4z"/>
                                 </svg>
                             </button>
-                            <span class="flex items-center gap-1 flex-1" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; pointer-events: none;">
+                            <span class="flex items-center gap-1 flex-1" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; pointer-events: none;" title="${esc(folder.name)}">
                                 <span>${esc(folder.name)}</span>
                                 ${folder.notes.length === 0 && (!folder.children || Object.keys(folder.children).length === 0) ? `<span class="text-xs" style="color: var(--text-tertiary); font-weight: 400;">(${this.t('folders.empty')})</span>` : ''}
                             </span>
@@ -1919,7 +1919,7 @@ function noteApp() {
                                 onmouseover="window.$root.handleItemHover(this, true)"
                                 onmouseout="window.$root.handleItemHover(this, false)"
                             >
-                                <span class="truncate" style="display: block; padding-right: 30px;">${shareIcon}${icon}${icon ? ' ' : ''}${esc(note.name)}</span>
+                                <span class="truncate" style="display: block; padding-right: 30px;" title="${esc(note.name)}">${shareIcon}${icon}${icon ? ' ' : ''}${esc(note.name)}</span>
                                 <button 
                                     data-path="${esc(note.path)}"
                                     data-name="${esc(note.name)}"
diff --git a/frontend/index.html b/frontend/index.html
index b03c20a..3995c61 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1430,7 +1430,7 @@
                                             <svg class="w-3.5 h-3.5 flex-shrink-0" style="color: var(--warning, #eab308);" fill="currentColor" viewBox="0 0 24 24">
                                                 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
                                             </svg>
-                                            <span class="text-xs truncate" x-text="fav.name"></span>
+                                            <span class="text-xs truncate" x-text="fav.name" :title="fav.name"></span>
                                         </div>
                                         <button 
                                             @click.stop="toggleFavorite(fav.path)"
@@ -1508,7 +1508,7 @@
                                 @mouseover="if(currentNote !== note.path && currentMedia !== note.path) $el.style.backgroundColor='var(--bg-hover)'"
                                 @mouseout="if(currentNote !== note.path && currentMedia !== note.path) $el.style.backgroundColor='transparent'"
                             >
-                                <span class="truncate" style="display: block; padding-right: 30px;">
+                                <span class="truncate" style="display: block; padding-right: 30px;" :title="note.name">
                                     <span x-text="getMediaIcon(note.type)"></span>
                                     <span x-text="note.name"></span>
                                 </span>
@@ -1603,8 +1603,8 @@
                                         onmouseover="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='var(--bg-hover)'"
                                         onmouseout="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='transparent'"
                                     >
-                                        <div class="font-medium truncate" x-text="note.name"></div>
-                                        <div class="text-xs truncate" style="color: var(--text-tertiary);" x-html="(note.matches && note.matches.length > 0) ? note.matches[0].context : (note.folder || 'Root')"></div>
+                                        <div class="font-medium truncate" x-text="note.name" :title="note.name"></div>
+                                        <div class="text-xs truncate" style="color: var(--text-tertiary);" x-html="(note.matches && note.matches.length > 0) ? note.matches[0].context : (note.folder || 'Root')" :title="note.folder || 'Root'"></div>
                     </div>
                 </template>
             </div>
@@ -1699,7 +1699,7 @@
                                             onmouseover="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='var(--bg-hover)'"
                                             onmouseout="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='transparent'"
                                         >
-                                            <span class="truncate block" x-text="note.name"></span>
+                                            <span class="truncate block" x-text="note.name" :title="note.name"></span>
                                         </div>
                                     </template>
                                     <div x-show="searchResults.length === 0" class="px-3 py-4 text-center text-xs" style="color: var(--text-tertiary);" x-text="t('tags.no_matches')">
@@ -1737,6 +1737,7 @@
                                                 class="block truncate"
                                                 :style="heading.level === 1 ? 'font-weight: 600;' : (heading.level === 2 ? 'font-weight: 500;' : '')"
                                                 x-text="heading.text"
+                                                :title="heading.text"
                                             ></span>
                                         </button>
                                     </template>
@@ -2927,8 +2928,8 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                         </svg>
                         <div class="flex-1 min-w-0">
-                            <div class="font-medium truncate" style="color: var(--text-primary);" x-text="note.name"></div>
-                            <div class="text-xs truncate" style="color: var(--text-secondary);" x-show="note.folder" x-text="note.folder"></div>
+                            <div class="font-medium truncate" style="color: var(--text-primary);" x-text="note.name" :title="note.name"></div>
+                            <div class="text-xs truncate" style="color: var(--text-secondary);" x-show="note.folder" x-text="note.folder" :title="note.folder"></div>
                         </div>
                     </div>
                 </template>