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.
This commit is contained in:
parent
7c83fa662c
commit
2a31678632
1 changed files with 3 additions and 1 deletions
|
@ -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>
|
||||
);
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue