I have a custom webpart which gets each document's information from document library. I have created HTML table to show all the data in like document name, Author, Created by, Modified by, etc.

Now I want to open the callout popup on hover of document name. I want same functionality as shown in below image.

enter image description here

I need all the document information mentioned in above image in my custom webpart code.

Please help me by providing JS or C# code behind solution by which i can achieve it in my webpart.

Thanks in advance.

1 Answer 1


You have to use WopiFrame.aspx to open document in iframe.

I achieved this functionality in office 365 SharePoint because by default office 365 provide office web apps.

I generate iframe with jquery with below code

<div class='doc-online'>
    <iframe style='width:100%;' src='"  + SiteRelativeUrl + "/_layouts/15/WopiFrame.aspx?sourcedoc={" + guid + "}&action=interactivepreview ' width='400px' height='252px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>
  • This code simply shows the URL (Page) in iFrame. It is not opening callout popup. Can you please provide me the entire code which you tried? I want the callout popup in click event (HTML href).
    – Hardik
    Commented Feb 17, 2017 at 13:02

Your Answer

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

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