I want to use the material-ui react tooltip on the following component:
const Icon = ({
name,
color,
size,
}) => {
return (
<i
aria-hidden='true'
style={{
fontSize: size,
color,
}}>
{name}
</i>
)
};
export default Icon;
The Icon is created through an Iconfont. Implementing the tooltip like this does not work - no tooltip is showing
...
icons.map(icon => {
<Tooltip
title='Foo'
placement='right'>
<Icon
size={icon.size}
color={icon.color}
name={icon.name} />
</Tooltip>
}
...
But, replacing the <Icon /> through a simple <i>, works.
...
icons.map(icon => {
<Tooltip
title='Foo'
placement='right'>
<i>
{'Bar'}
</i>
</Tooltip>
}
...
How can I use the material-ui react tooltip with th <Icon /> component?
