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.

1 Answer 1



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.

enter image description here

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.