how to use Fluent UI HoverCard in SPFX Webpart

Question

In my current project there's requirement to show more details when hovering on a read more HTML span, where specified functionality is to show Fluent UI HoverCard with all the details, I am trying to read the docs and apply the example given in my solution but in the docs the example looks pretty ambiguous as it only uses a DetailsList control in the example which is not clear if we are looking use it with some control in my situation I am getting data from sharepoint list and want to show HoverCard for each item description.it will be really helpful for me if I get a more clear example.

Answer 1

@Asad_code,

From the docs, each cell is wrapped with HoverCard. In the example, onRenderItemColumn will be the "default" item column renderer method. This affects cells within the rows, not the rows themselves.

Another method is to use target property: target element to tag hover card on. If not provided and using HoverCard as a wrapper

BR