From 73975ab5210478eddbac88af1b4ec81a3a86e7c9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 27 Dec 2025 20:43:05 +0200
Subject: [PATCH] feat(note_icon): use bootstrap tooltip

---
 apps/client/src/widgets/note_icon.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx
index 7ce5e020f..ae5867f45 100644
--- a/apps/client/src/widgets/note_icon.tsx
+++ b/apps/client/src/widgets/note_icon.tsx
@@ -13,7 +13,7 @@ import ActionButton from "./react/ActionButton";
 import Dropdown from "./react/Dropdown";
 import { FormDropdownDivider, FormListItem } from "./react/FormList";
 import FormTextBox from "./react/FormTextBox";
-import { useNoteContext, useNoteLabel } from "./react/hooks";
+import { useNoteContext, useNoteLabel, useStaticTooltip } from "./react/hooks";
 
 interface IconToCountCache {
     iconClassToCountMap: Record<string, number>;
@@ -58,9 +58,16 @@ function NoteIconList({ note, dropdownRef }: {
     dropdownRef: RefObject<BootstrapDropdown>;
 }) {
     const searchBoxRef = useRef<HTMLInputElement>(null);
+    const iconListRef = useRef<HTMLDivElement>(null);
     const [ search, setSearch ] = useState<string>();
     const [ iconData, setIconData ] = useState<IconData>();
     const [ filterByPrefix, setFilterByPrefix ] = useState<string | null>(null);
+    useStaticTooltip(iconListRef, {
+        selector: "span",
+        customClass: "pre-wrap-text",
+        animation: false,
+        title() { return this.getAttribute("title") || ""; },
+    });
 
     useEffect(() => {
         async function loadIcons() {
@@ -152,6 +159,7 @@ function NoteIconList({ note, dropdownRef }: {
 
             <div
                 class="icon-list"
+                ref={iconListRef}
                 onClick={(e) => {
                     // Make sure we are not clicking on something else than a button.
                     const clickedTarget = e.target as HTMLElement;