From 2a31678632cb64b3c3b8fa5a5290b50f4c8d43e7 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Wed, 24 Mar 2021 12:27:45 +0800
Subject: [PATCH] Fix tooltip not working in <Icon>

According to https://stackoverflow.com/questions/10643426/how-to-add-a-tooltip-to-an-svg-graphic, the tooltip needs to be a child `title` element, not the attribute.
---
 ui/component/common/icon-custom.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx
index 417b59eb7..c4d7f0fa6 100644
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@@ -7,6 +7,7 @@ import { v4 as uuid } from 'uuid';
 type IconProps = {
   size: number,
   color: string,
+  title?: string,
 };
 
 type CustomProps = {
@@ -18,7 +19,7 @@ type CustomProps = {
 // Icons with tooltips need to use this function so the ref can be properly forwarded
 const buildIcon = (iconStrokes: React$Node, customSvgValues = {}) =>
   forwardRef((props: IconProps, ref) => {
-    const { size = 24, color = 'currentColor', ...otherProps } = props;
+    const { size = 24, color = 'currentColor', title, ...otherProps } = props;
     return (
       <svg
         ref={ref}
@@ -35,6 +36,7 @@ const buildIcon = (iconStrokes: React$Node, customSvgValues = {}) =>
         {...customSvgValues}
       >
         {iconStrokes}
+        {title && <title>{title}</title>}
       </svg>
     );
   });