Tooltip with bold values are not working

Question

When I try to bold the cost value in the following tool tip message, it is coming at the extreme end.

Code:

<TooltipComponent content={'This cost of <b>' + getSymbolFromCurrency(currencyCode) + formatCost(Math.abs(alert.costImpactConstruction), 0, DENOMINATION.auto) + '</b> is estimated for the project'} position="RightCenter">abc</TooltipComponent>

The following is snip of how it appears in UI

This is how it appears in UI

Prasanth Madhaiyan · Answer

Hi Aravind,Greetings from Syncfusion support.We have validated your reported query by preparing the React
Tooltip sample, and we are able to replicate the reported issue while passing
the content values as shared in your code. But we need some additional time to
further validate and identify the root cause of this issue. We will update you
with further details on or before June 22, 2022.We appreciate
your patience.Regards,Prasanth Madhaiyan.

Indhumathy Loganathan · Answer

Hi Aravind,Thanks for your patience.We have validated your reported query. The reported issue occurs when we use HTML tags such as bold or span directly, it automatically moves the element to the end of that string. However, you can directly set the HTML elements as Tooltip content by following the below way. Check the below code snippet. getSymbolFromCurrency(args) { return (

Hello $0 is estimated for the project.

); } ... render() { return (

{/* Tooltip element */}