CODEWITHSUNDEEP
reactjsmaterial-ui
Kaiser
Kaiser

Reputation: 13

Is it possible to add icon inside Material UI Tooltip?

Here is my code. I have tried to use the material icon(PhoneInTalk) inside Tooltip's title attribute. But my process seems not working. Here is my output: enter image description here 

//@material-ui/core/styles
const CustomTooltip = withStyles({
  tooltip: {
    color: "tomato",
    backgroundColor: "black",
    fontWeight: "bold",
    fontSize: "12px",
  },
})(Tooltip);

//JSX
<CustomTooltip
        title={`${(<PhoneInTalk />)} Let's talk`}
        placement="top-end"
        arrow
        >
<Avatar className={classes.avatar} src={avatar} alt="Ibrahim Kaiser" />
</CustomTooltip>

Upvotes: 0

Views: 5646

Answers (1)

Karthick Vinod
Karthick Vinod

Reputation: 1437

Try enclosing the icon and text in a fragment.

<CustomTooltip
    title={<><PhoneInTalk /> Let's talk</>}
    placement="top-end"
    arrow
>

Check this example sandbox link

Upvotes: 5

Related Questions