Nerivec · Nerivec · Sep 27, 2025 · Sep 27, 2025
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -6,10 +6,16 @@ interface ButtonProps<T> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "
 }
 
 export default function Button<T>(props: ButtonProps<T>): JSX.Element {
-    const { children, item, onClick, ...rest } = props;
+    const { children, item, onClick, title, className, ...rest } = props;
 
     return (
-        <button type="button" {...rest} onClick={async () => await onClick?.(item as T)}>
+        <button
+            type="button"
+            className={`${className} ${title ? "tooltip" : ""}`}
+            data-tip={title}
+            {...rest}
+            onClick={async () => await onClick?.(item as T)}
+        >
             {children}
         </button>
     );

diff --git a/src/components/ConfirmButton.tsx b/src/components/ConfirmButton.tsx
@@ -11,7 +11,7 @@ interface ConfirmButtonProps<T>
 }
 
 export default function ConfirmButton<T>(props: ConfirmButtonProps<T>): JSX.Element {
-    const { children, item, onClick, modalDescription, modalCancelLabel, title, ...rest } = props;
+    const { children, item, onClick, modalDescription, modalCancelLabel, title, className, ...rest } = props;
 
     const onClickHandler = useCallback(async (): Promise<void> => {
         await NiceModal.show(DialogConfirmationModal, {
@@ -24,7 +24,7 @@ export default function ConfirmButton<T>(props: ConfirmButtonProps<T>): JSX.Elem
     }, [item, onClick, title, modalDescription, modalCancelLabel]);
 
     return (
-        <button type="button" title={title} {...rest} onClick={onClickHandler}>
+        <button type="button" className={`${className} tooltip`} data-tip={title} {...rest} onClick={onClickHandler}>
             {children}
         </button>
     );

diff --git a/src/components/Notifications.tsx b/src/components/Notifications.tsx
@@ -23,7 +23,11 @@ const Notification = memo(({ log, onClick }: NotificationProps) => {
     const alertRef = useRef<HTMLDivElement | null>(null);
 
     return (
-        <div ref={alertRef} className={`alert ${LOG_LEVELS_CMAP[log.level]} break-all gap-1 p-2 pe-0.5`} title={log.timestamp}>
+        <div
+            ref={alertRef}
+            className={`alert ${LOG_LEVELS_CMAP[log.level]} break-all gap-1 p-2 pe-0.5 tooltip tooltip-left`}
+            data-tip={log.timestamp}
+        >
             <span>{log.message}</span>
             <div className="justify-self-end">
                 <Button item={alertRef} onClick={onClick} className="btn btn-xs btn-square">

diff --git a/src/components/PermitJoinButton.tsx b/src/components/PermitJoinButton.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import store2 from "store2";
 import { useShallow } from "zustand/react/shallow";
 import { PERMIT_JOIN_TIME_KEY } from "../localStoreConsts.js";
-import { API_NAMES, API_URLS, MULTI_INSTANCE, useAppStore } from "../store.js";
+import { API_URLS, useAppStore } from "../store.js";
 import type { Device } from "../types.js";
 import { sendMessage } from "../websocket/WebSocketManager.js";
 import Button from "./Button.js";
@@ -38,7 +38,6 @@ const PermitJoinDropdown = memo(({ selectedRouter, setSelectedRouter }: PermitJo
                                     setSelectedRouter([sourceIdx, device]);
                                 }
                             }}
-                            title={MULTI_INSTANCE ? `${API_NAMES[sourceIdx]} - ${device.friendly_name}` : device.friendly_name}
                         >
                             <span
                                 className={`dropdown-item${selectedRouter[0] === sourceIdx && selectedRouter[1]?.ieee_address === device.ieee_address ? " menu-active" : ""}`}
@@ -65,7 +64,6 @@ const PermitJoinDropdown = memo(({ selectedRouter, setSelectedRouter }: PermitJo
                             setSelectedRouter([sourceIdx, undefined]);
                         }
                     }}
-                    title={MULTI_INSTANCE ? `${API_NAMES[sourceIdx]} - ${t(($) => $.all)}` : t(($) => $.all)}
                 >
                     <span className={`dropdown-item${selectedRouter[0] === sourceIdx && selectedRouter[1] === undefined ? " menu-active" : ""}`}>
                         <SourceDot idx={sourceIdx} autoHide namePostfix=" - " />
@@ -81,7 +79,7 @@ const PermitJoinDropdown = memo(({ selectedRouter, setSelectedRouter }: PermitJo
     return (
         <DialogDropdown
             buttonChildren={
-                <span title={t(($) => $.toggle_dropdown)}>
+                <span className="tooltip tooltip-right" data-tip={t(($) => $.toggle_dropdown)}>
                     <FontAwesomeIcon icon={faAngleDown} />
                 </span>
             }

diff --git a/src/components/device-page/HeaderDeviceSelector.tsx b/src/components/device-page/HeaderDeviceSelector.tsx
@@ -61,12 +61,7 @@ const HeaderDeviceSelector = memo(({ currentSourceIdx, currentDevice, tab = "inf
         >
             <label className="input min-h-10" key="search">
                 <FontAwesomeIcon icon={faMagnifyingGlass} />
-                <DebouncedInput
-                    onChange={setSearchTerm}
-                    placeholder={t(($) => $.type_to_filter)}
-                    value={searchTerm}
-                    title={t(($) => $.type_to_filter)}
-                />
+                <DebouncedInput onChange={setSearchTerm} placeholder={t(($) => $.type_to_filter)} value={searchTerm} />
             </label>
             {items}
         </DialogDropdown>

diff --git a/src/components/device-page/ReportingRow.tsx b/src/components/device-page/ReportingRow.tsx
@@ -153,6 +153,7 @@ const ReportingRow = memo(({ sourceIdx, rule, device, onApply }: ReportingRowPro
                     <legend className="fieldset-legend">{t(($) => $.actions)}</legend>
                     <div className="join join-horizontal">
                         <Button<NiceReportingRule>
+                            title={t(($) => $.apply, { ns: "common" })}
                             className="btn btn-primary btn-outline join-item"
                             item={stateRule}
                             onClick={onApply}

diff --git a/src/components/device/DeviceCard.tsx b/src/components/device/DeviceCard.tsx
@@ -104,10 +104,10 @@ const DeviceCard = memo(
                     </div>
                 </div>
                 <div className="flex flex-row flex-wrap gap-1 mx-2 mb-2 justify-around items-center">
-                    <span className="badge badge-soft badge-ghost cursor-default" title={t(($) => $.lqi)}>
+                    <span className="badge badge-soft badge-ghost cursor-default tooltip" data-tip={t(($) => $.lqi)}>
                         <Lqi value={deviceState.linkquality as number | undefined} />
                     </span>
-                    <span className="badge badge-soft badge-ghost cursor-default" title={t(($) => $.power)}>
+                    <span className="badge badge-soft badge-ghost cursor-default tooltip" data-tip={t(($) => $.power)}>
                         <PowerSource
                             device={device}
                             batteryPercent={deviceState.battery as number}

diff --git a/src/components/device/DeviceControlEditName.tsx b/src/components/device/DeviceControlEditName.tsx
@@ -19,7 +19,7 @@ const DeviceControlEditName = memo(({ sourceIdx, name, homeassistantEnabled, sty
 
     return (
         <Button<undefined>
-            className={`btn ${style}`}
+            className={`btn ${style} tooltip`}
             onClick={async () =>
                 await NiceModal.show(RenameDeviceModal, {
                     sourceIdx,
@@ -28,7 +28,7 @@ const DeviceControlEditName = memo(({ sourceIdx, name, homeassistantEnabled, sty
                     homeassistantEnabled,
                 })
             }
-            title={t(($) => $.rename_device)}
+            data-tip={t(($) => $.rename_device)}
         >
             <FontAwesomeIcon icon={faEdit} />
         </Button>

diff --git a/src/components/features/Binary.tsx b/src/components/features/Binary.tsx
@@ -43,7 +43,7 @@ const Binary = memo((props: BinaryProps) => {
                 {valueExists ? (
                     <input className="toggle" type="checkbox" checked={deviceValue === valueOn} onChange={onCheckboxChange} />
                 ) : (
-                    <span title={t(($) => $.unknown)}>
+                    <span className="tooltip" data-tip={t(($) => $.unknown)}>
                         <FontAwesomeIcon icon={faQuestion} />
                     </span>
                 )}

diff --git a/src/components/group/GroupCard.tsx b/src/components/group/GroupCard.tsx
@@ -33,16 +33,6 @@ const GroupCard = ({ sourceIdx, group, endpoint, removeFromGroup }: GroupCardPro
                         )}
                     </div>
                 </div>
-                {/* <div className="text-sm w-full p-2 max-h-125 overflow-y-auto" style={{ scrollbarWidth: "thin" }}>
-                    {group.members.map((member) => (
-                        <div key={`${member.ieee_address}-${member.endpoint}`} className="flex flex-row items-center gap-1 mb-2">
-                            <div className="grow-1">{member.ieee_address}</div>
-                            <div className="shrink-1" title={t("endpoint", {ns: "zigbee"})}>
-                                {member.endpoint}
-                            </div>
-                        </div>
-                    ))}
-                </div> */}
             </div>
             <div className="flex flex-row flex-wrap gap-1 mx-2 mb-2 justify-around items-center">
                 <div className="badge badge-soft badge-ghost cursor-default me-2 tooltip" data-tip={t(($) => $.group_members)}>

diff --git a/src/components/network-page/raw-map/Controls.tsx b/src/components/network-page/raw-map/Controls.tsx
@@ -85,12 +85,12 @@ const Controls = memo(
             <>
                 {/** 19rem matches for 2x w-36 select currently in right side */}
                 <div className="absolute z-9 top-0 left-0 p-1 flex flex-row flex-wrap gap-1 items-start max-w-[calc(100vw-19rem)] md:max-w-none">
-                    <Button title={t(($) => $.download_image)} className="btn btn-square btn-neutral btn-sm" onClick={downloadAsImage}>
+                    <Button title={t(($) => $.download_image)} className="btn btn-square btn-neutral btn-sm tooltip-right" onClick={downloadAsImage}>
                         <FontAwesomeIcon icon={faDownload} />
                     </Button>
                     <Button
                         title={t(($) => $.reset_controls)}
-                        className="btn btn-square btn-neutral btn-sm"
+                        className="btn btn-square btn-neutral btn-sm tooltip-right"
                         onClick={() => {
                             graphRef.current?.resetControls();
                         }}
@@ -99,7 +99,7 @@ const Controls = memo(
                     </Button>
                     <Button
                         title={t(($) => $.fit_view)}
-                        className="btn btn-square btn-neutral btn-sm"
+                        className="btn btn-square btn-neutral btn-sm tooltip-bottom"
                         onClick={() => {
                             graphRef.current?.centerGraph();
                             graphRef.current?.fitNodesInView();
@@ -109,7 +109,7 @@ const Controls = memo(
                     </Button>
                     <Button
                         title={t(($) => $.zoom_in)}
-                        className="btn btn-square btn-neutral btn-sm"
+                        className="btn btn-square btn-neutral btn-sm tooltip-bottom"
                         onClick={() => {
                             graphRef.current?.zoomIn();
                         }}
@@ -118,15 +118,15 @@ const Controls = memo(
                     </Button>
                     <Button
                         title={t(($) => $.zoom_out)}
-                        className="btn btn-square btn-neutral btn-sm"
+                        className="btn btn-square btn-neutral btn-sm tooltip-bottom"
                         onClick={() => {
                             graphRef.current?.zoomOut();
                         }}
                     >
                         <FontAwesomeIcon icon={faMinusSquare} />
                     </Button>
                     <Button<boolean>
-                        className={`btn btn-square btn-neutral btn-sm ${showParents ? "" : "btn-outline"}`}
+                        className={`btn btn-square btn-neutral btn-sm tooltip-bottom ${showParents ? "" : "btn-outline"}`}
                         item={!showParents}
                         onClick={setShowParents}
                         title={t(($) => $.parent)}
@@ -137,7 +137,7 @@ const Controls = memo(
                         />
                     </Button>
                     <Button<boolean>
-                        className={`btn btn-square btn-neutral btn-sm ${showChildren ? "" : "btn-outline"}`}
+                        className={`btn btn-square btn-neutral btn-sm tooltip-bottom ${showChildren ? "" : "btn-outline"}`}
                         item={!showChildren}
                         onClick={setShowChildren}
                         title={t(($) => $.child)}
@@ -148,7 +148,7 @@ const Controls = memo(
                         />
                     </Button>
                     <Button<boolean>
-                        className={`btn btn-square btn-neutral btn-sm ${showSiblings ? "" : "btn-outline"}`}
+                        className={`btn btn-square btn-neutral btn-sm tooltip-bottom ${showSiblings ? "" : "btn-outline"}`}
                         item={!showSiblings}
                         onClick={setShowSiblings}
                         title={t(($) => $.sibling)}
@@ -159,22 +159,21 @@ const Controls = memo(
                         />
                     </Button>
                     <Button<boolean>
-                        className={`btn btn-square btn-neutral btn-sm ${config.showIcons ? "" : "btn-outline"}`}
+                        className={`btn btn-square btn-neutral btn-sm tooltip-bottom ${config.showIcons ? "" : "btn-outline"}`}
                         item={!config.showIcons}
                         onClick={(value) => setConfig((prev) => ({ ...prev, showIcons: value }))}
                         title={t(($) => $.icons)}
                     >
                         <FontAwesomeIcon icon={faIcons} />
                     </Button>
-                    <select className="select select-sm w-36" title={t(($) => $.find_node)} defaultValue="" onChange={findNode}>
+                    <select className="select select-sm w-36" defaultValue="" onChange={findNode}>
                         <option value="">{t(($) => $.find_node)}</option>
                         {nodeOptions}
                     </select>
                 </div>
                 <div className="absolute z-9 top-0 right-0 p-1 flex flex-row flex-wrap gap-1 items-start justify-end">
                     <select
                         className="select select-sm w-36"
-                        title={t(($) => $.layout_type)}
                         value={config.layoutType}
                         onChange={(event) => event.target.value && setConfig((prev) => ({ ...prev, layoutType: event.target.value as LayoutTypes }))}
                     >
@@ -191,7 +190,6 @@ const Controls = memo(
                     </select>
                     <select
                         className="select select-sm w-36"
-                        title={t(($) => $.label_type)}
                         value={config.labelType}
                         onChange={(event) =>
                             event.target.value && setConfig((prev) => ({ ...prev, labelType: event.target.value as LabelVisibilityType }))
@@ -232,7 +230,7 @@ const Controls = memo(
                 <div className="absolute z-9 bottom-0 right-0 p-1 flex flex-row flex-wrap gap-1 items-end justify-end">
                     <Button
                         title={t(($) => $.scroll_to_top, { ns: "common" })}
-                        className="btn btn-primary btn-square ml-auto"
+                        className="btn btn-primary btn-square ml-auto tooltip-left"
                         onClick={() => {
                             window.scrollTo(0, 0);
                         }}

diff --git a/src/components/table/TableSearch.tsx b/src/components/table/TableSearch.tsx
@@ -36,7 +36,7 @@ export default function TableSearch<T>({ table, resetFilters, globalFilter, colu
                 <Button
                     item=""
                     onClick={table.setGlobalFilter}
-                    className="btn btn-sm lg:btn-md btn-square btn-warning btn-outline join-item"
+                    className="btn btn-sm lg:btn-md btn-square btn-warning btn-outline join-item tooltip-bottom"
                     title={t(($) => $.clear)}
                     disabled={globalFilter == null || globalFilter === ""}
                 >
@@ -49,16 +49,16 @@ export default function TableSearch<T>({ table, resetFilters, globalFilter, colu
                     <div className="join">
                         <label
                             htmlFor="table-filters-drawer"
-                            className="drawer-button btn btn-sm lg:btn-md btn-info btn-outline join-item"
+                            className="drawer-button btn btn-sm lg:btn-md btn-info btn-outline join-item tooltip tooltip-bottom"
                             onClick={() => setDrawerOpen(!drawerOpen)}
-                            title={t(($) => $.advanced_search)}
+                            data-tip={t(($) => $.advanced_search)}
                         >
                             <FontAwesomeIcon icon={faFilter} />
                             {t(($) => $.advanced_search)}
                             {activeFiltersCount > 0 ? <span className="badge badge-info badge-xs lg:badge-sm">{activeFiltersCount}</span> : null}
                         </label>
                         <Button<void>
-                            className="btn btn-sm lg:btn-md btn-square btn-warning btn-outline join-item"
+                            className="btn btn-sm lg:btn-md btn-square btn-warning btn-outline join-item tooltip-bottom"
                             title={t(($) => $.reset)}
                             onClick={() => {
                                 resetFilters();