0

I'm using typescript / react and my website has an icon as seen below: Icon Image

This is the code for the Icon :

<Icon iconName="Info" tabIndex={0} aria-label={description} css="padding: 0 .2rem; margin-right: .1rem; " title={description} />

When you hover over the icon you see the title of the icon in the following image: Title of the icon

However, when zooming, the text of the tooltip (title part of the code / tooltip) does not resize or increase / decrease with zoom. How can I change the title attribute of the element so that it resizes with zooming correctly.

suvi
  • 9
  • 3

1 Answers1

0

If you want the font to enlarge or diminish when the user zooms in/out, then consider using em as your css unit

Suman
  • 97
  • 4
  • Are you saying use "font-size: 0.8 em " for example in the css part? If so, that does not work, I'm specifically trying to increase the size of the title attribute, nothing else – suvi Jun 13 '22 at 04:36
  • Refer here https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers and calculate the font-size dyanamically – Suman Jun 13 '22 at 04:56
  • I don't think you understand my question or follow up comment well. My question also has to do with how to resize a single attribute of an element rather than the whole element. If you can give a code sample of your idea it may be more helpful, but I understand what you're saying, but it's not helping as zooming isn't the issue, the fact that the attribute title which is a tool tip and won't resize is. (The normal text resizes, the tool tip does not) – suvi Jun 13 '22 at 05:15