PDF - Hover to see PDF in Modal Popover

by bizamajig

HTML

<script src="http://dl.dropbox.com/u/40036711/jquery.hovercard.min.js"></script>
<div id="hint">Hover the bold 'PDF' abbreviation below to see the pdf in hovercard!</div>

<div><label class="hoverme">(PDF)</label> Portable Document Format  is an open standard for document exchange. This file format, created by Adobe Systems in 1993, is used for representing documents in a manner independent of application software, hardware, and operating systems.[2] Each PDF file encapsulates a complete description of a fixed-layout flat document, including the text, fonts, graphics, and other information needed to display it.</div>

CSS

body{
    font-size:13px;
    font-family:Sans-serif;
    padding:20px;
}
.padded
{
    padding:15px 10px;
    border:solid 2px #eee;
    background:#333;
}
#hint
{
    margin-bottom:20px;
    padding:5px;
    background:#ffffaa;
}

JavaScript

var pdfDiv = '<p>In 2008, Adobe published a Public Patent License to ISO 32000-1 granting a royalty-free rights for all patents owned by Adobe that are necessary to make, use, sell and distribute PDF compliant implementations.<br/>Following is a sample pdf:</p>' +
    '<div class="padded">'+ 
    '<object data="http://dl.dropbox.com/u/40036711/sample.pdf" type="application/pdf" width="400" height="400"> alt : <a href="http://dl.dropbox.com/u/40036711/sample.pdf">sample.pdf</a> </object>'+
    '</div>';

$('.hoverme').hovercard({
    detailsHTML: pdfDiv,
    width:430
});