How to format content of tooltip and add line breaks within tooltip of chakra ui?

Question

I have a tooltip to be shown which is like 4-5 lines having title in bold and next few lines separated by a line break. I am able to render the tooltip using chakra ui but while using tags for bold or tags for line break
- they get rendered as it is in the tooltip . I tried searching in the documentation of chakra ui but could not find anything through which I can format content within the tooltip. Even here, in this question they dont get rendered and format the text of my question instead.

Note that I have to use chakra ui tooltip only.

Also, the same tooltip is to be shown in column header of ag-grid as well as one form. While using these 2 tags, the ag-grid tooltip is formatting the content as per the tags , but while using same tags in chakra-ui tooltip to be used in the form, it does not format. I know these 2 have no relation with each other - but I am just trying to highlight the point that it does work in some other tooltip offered by ag-grid in this case.

Answer 1

You can pass component to the label of the Tooltip:

<Tooltip label={<Stack>
                  <Text >First line </Text>
                  <Text >second line </Text>
                  <Text >third line </Text>
               </Stack>}>