javascript - How to display a pdf file on tool tip using jquery - Stack Overflow

I have a link as:

<a href="pdf/testpdf.pdf">PDF</a>

I want to set a tooltip for this link and in tooltip display the same pdf file.

That means i want to display the contents of testpdf.pdf file in tooltip when mouse over the link.

I searched that for in google, but there have no link siutable for me.

There have a lot of model for image ,text in tooltip.

How can I do this?

Anyboady have any solution?

I have a link as:

<a href="pdf/testpdf.pdf">PDF</a>

I want to set a tooltip for this link and in tooltip display the same pdf file.

That means i want to display the contents of testpdf.pdf file in tooltip when mouse over the link.

I searched that for in google, but there have no link siutable for me.

There have a lot of model for image ,text in tooltip.

How can I do this?

Anyboady have any solution?

• javascript
• jquery
• tooltip

Share Follow edited Aug 21, 2012 at 6:34 Kichu asked Aug 21, 2012 at 6:14 KichuKichu 3,2671616 gold badges7272 silver badges135135 bronze badges 2

• What's about <a title="testpdf.pdf" href="pdf/testpdf.pdf">PDF</a>? – Uooo Commented Aug 21, 2012 at 6:33
• i need to diplay the contents not the title.... – Kichu Commented Aug 21, 2012 at 6:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Displaying a PDF generally involves launching a browser plugin, such as Adobe Reader, which has its own menu bar, toolbar, and so on. Cramming that into a small space like a tooltip probably isn't very practical.

You'd be better off rendering a thumbnail image — maybe use a PDF library on the server for this — and showing that in the tooltip.

You can try pdf.js

It renders PDF files onto canvas..

But in my opinion it is not a good solution at all, when the PDF is big, it will take some time to load it into the tooltip..Better is to create a thumbnail on the server and display it as a standard image.. Here is how to do that with PHP

I think that requires the browser to have a plugin to display PDF inline instead of downloading it. Once this is ensured, you can set the target of your tooltip to the URL pointing to PDF. What tooltip library are you using, btw?