How to bold/underline copy in an antd tooltip

Question

I have a helper that returns a string for an antd tooltip that needs to have a portion bolded and underlined.

I have tried to dangerouslySetInnerHTML with no luck.

I have also tried to use antd's Typography:

`Some normal text ${(<Text strong>and some bold</Text>)}`

which results in:

Some normal text [object Object]

Answer 1

There is no need to use dangerouslySetInnerHTML, you can do it simply by passing a JSX statement to title props (check this out).

For example:

<Tooltip title={
  <>
    <strong>bolded part</strong> plain part <u>underlined part</u>
  </>
}>
  <span>Tooltip will show on mouse enter.</span>
</Tooltip>