fix: Fixed tooltips

Author: CrawlerCode

src/components/issues/Issue.tsx

@@ -144,7 +144,7 @@ const Issue = ({ issue, priorityType, timerData, assignedToMe, pinned, remembere
               e.preventDefault();
             }
           }}
-          data-tooltip-id="tooltip-toggle-timer"
+          data-tooltip-id={`tooltip-toggle-timer-${issue.id}`}
         >
           <h1
             className={clsx("mb-1 truncate", {
@@ -186,20 +186,20 @@ const Issue = ({ issue, priorityType, timerData, assignedToMe, pinned, remembere
           <div className="absolute top-2 right-2 flex justify-end items-start gap-x-1">
             {pinned && (
               <>
-                <Tooltip id="tooltip-pinned" place="left" delayShow={700} content={formatMessage({ id: "issues.issue.pinned" })} className="italic" />
-                <FontAwesomeIcon icon={faStar} className="text-gray-300 dark:text-gray-600 focus:outline-none" data-tooltip-id="tooltip-pinned" tabIndex={-1} />
+                <Tooltip id={`tooltip-pinned-${issue.id}`} place="left" delayShow={700} content={formatMessage({ id: "issues.issue.pinned" })} className="italic" />
+                <FontAwesomeIcon icon={faStar} className="text-gray-300 dark:text-gray-600 focus:outline-none" data-tooltip-id={`tooltip-pinned-${issue.id}`} tabIndex={-1} />
               </>
             )}
             {!assignedToMe && (
               <>
-                <Tooltip id="tooltip-not-assigned-to-me" place="left" delayShow={700} content={formatMessage({ id: "issues.issue.not-assigned-to-me" })} className="italic" />
-                <FontAwesomeIcon icon={faCircleUser} className="text-gray-300 dark:text-gray-600 focus:outline-none" data-tooltip-id="tooltip-not-assigned-to-me" tabIndex={-1} />
+                <Tooltip id={`tooltip-not-assigned-to-me-${issue.id}`} place="left" delayShow={700} content={formatMessage({ id: "issues.issue.not-assigned-to-me" })} className="italic" />
+                <FontAwesomeIcon icon={faCircleUser} className="text-gray-300 dark:text-gray-600 focus:outline-none" data-tooltip-id={`tooltip-not-assigned-to-me-${issue.id}`} tabIndex={-1} />
               </>
             )}
           </div>
         </div>
       </ContextMenu>
-      <Tooltip id="tooltip-toggle-timer" place="bottom" delayShow={4000} className="italic max-w-[275px]">
+      <Tooltip id={`tooltip-toggle-timer-${issue.id}`} place="bottom" delayShow={4000} className="italic max-w-[275px] z-10">
         <FormattedMessage
           id="issues.action.toggle-timer.tooltip"
           values={{

src/components/issues/IssueTimer.tsx

@@ -87,11 +87,11 @@ const IssueTimer = forwardRef(({ issue, data: { active, time, start }, onStart,
         />
       )) || (
         <>
-          <Tooltip id="tooltip-edit-timer" place="top" delayShow={700} content={formatMessage({ id: "issues.timer.action.edit.tooltip" })} className="italic" />
+          <Tooltip id={`tooltip-edit-timer-${issue.id}`} place="top" delayShow={700} content={formatMessage({ id: "issues.timer.action.edit.tooltip" })} className="italic" />
           <span
             className={clsx("text-lg", timer > 0 ? "text-yellow-500" : "text-gray-700 dark:text-gray-500", active && "font-semibold")}
             onDoubleClick={() => setEditMode(true)}
-            data-tooltip-id="tooltip-edit-timer"
+            data-tooltip-id={`tooltip-edit-timer-${issue.id}`}
           >
             {formatTime(timer)}
           </span>
@@ -100,18 +100,25 @@ const IssueTimer = forwardRef(({ issue, data: { active, time, start }, onStart,
 
       {!active ? (
         <>
-          <Tooltip id="tooltip-start-timer" place="left" delayShow={700} content={formatMessage({ id: "issues.timer.action.start.tooltip" })} className="italic" />
-          <FontAwesomeIcon icon={faPlay} size="2x" className="text-green-500 cursor-pointer focus:outline-none" onClick={onStart} data-tooltip-id="tooltip-start-timer" tabIndex={-1} />
+          <Tooltip id={`tooltip-start-timer-${issue.id}`} place="left" delayShow={700} content={formatMessage({ id: "issues.timer.action.start.tooltip" })} className="italic" />
+          <FontAwesomeIcon icon={faPlay} size="2x" className="text-green-500 cursor-pointer focus:outline-none" onClick={onStart} data-tooltip-id={`tooltip-start-timer-${issue.id}`} tabIndex={-1} />
         </>
       ) : (
         <>
-          <Tooltip id="tooltip-pause-timer" place="left" delayShow={700} content={formatMessage({ id: "issues.timer.action.pause.tooltip" })} className="italic" />
-          <FontAwesomeIcon icon={faPause} size="2x" className="text-red-500 cursor-pointer focus:outline-none" onClick={() => onPause(timer)} data-tooltip-id="tooltip-pause-timer" tabIndex={-1} />
+          <Tooltip id={`tooltip-pause-timer-${issue.id}`} place="left" delayShow={700} content={formatMessage({ id: "issues.timer.action.pause.tooltip" })} className="italic" />
+          <FontAwesomeIcon
+            icon={faPause}
+            size="2x"
+            className="text-red-500 cursor-pointer focus:outline-none"
+            onClick={() => onPause(timer)}
+            data-tooltip-id={`tooltip-pause-timer-${issue.id}`}
+            tabIndex={-1}
+          />
         </>
       )}
 
-      <Tooltip id="tooltip-stop-timer" place="top" delayShow={700} content={formatMessage({ id: "issues.timer.action.stop.tooltip" })} className="italic" />
-      <FontAwesomeIcon icon={faStop} size="2x" className="text-red-500 cursor-pointer focus:outline-none" onClick={onStop} data-tooltip-id="tooltip-stop-timer" tabIndex={-1} />
+      <Tooltip id={`tooltip-stop-timer-${issue.id}`} place="top" delayShow={700} content={formatMessage({ id: "issues.timer.action.stop.tooltip" })} className="italic" />
+      <FontAwesomeIcon icon={faStop} size="2x" className="text-red-500 cursor-pointer focus:outline-none" onClick={onStop} data-tooltip-id={`tooltip-stop-timer-${issue.id}`} tabIndex={-1} />
 
       <Tooltip id={`tooltip-done-timer-${issue.id}`} place="bottom" delayShow={700} content={formatMessage({ id: "issues.timer.action.add-spent-time.tooltip" })} className="z-10 italic" />
       <FontAwesomeIcon