LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix tooltip not working in <Icon>

Browse source 
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.
This commit is contained in:
infinite-persistence 2021-03-24 12:27:45 +08:00 committed by Sean Yesmunt
parent 7c83fa662c
commit 2a31678632
1 changed files with 3 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/common/icon-custom.jsx
View file

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