How to create a Tooptip for an SvgIcon

[Grant]

Hi, 

Like my title says imtrying to create a KendoReact Tooltip around a SvgIcon.

I tried these 3 options, but have not been successful:

<Tooltip

  anchorElement="target"

  position="top"

>

   <SvgIcon icon={xIcon} />

</Tooltip>

<Tooltip

  anchorElement="target"

  position="top"

>

  <span title={'test'}>

    <SvgIcon icon={xIcon} />

  </span>

</Tooltip>

<Tooltip

  anchorElement="target"

  position="top"

>

  <span title={'test'}>

    <SvgIcon icon={xIcon}>

      <title>TEst</title>

    </SvgIcon>

  </span>

</Tooltip>

Please advise.

Thanks,
Grant

 

[Vessy]

Hi, Grant,

To add a tooltip to the SVG component you need to configure its title atribute. Please, note, that the svg element of the xIcon is pretty thin, therefore it might be hard to hover it and show tooltip but it is there, you can see a video from my test there:

• https://somup.com/cZXF6xJOm2 

Below you can see the sample I used for my test, I hope it will be helpful for you:

• https://stackblitz.com/edit/react-h9vgk2?file=app%2Fapp.tsx 

      <Tooltip anchorElement="target" position="top">
        <SvgIcon icon={xIcon} title="close" size="large" />
      </Tooltip>

Regards,
Vessy
Progress Telerik