A jquery plugin that provides you the ability to decorate file links and display tooltips containing information about the files when hovering over them.
Link to downloadable files: plaintext file and Portable Document Format file. The Font Awesome icons following the links are not present in the source markup, but are added by the plugin.
Here's a link to a non-existent file: no such file. This file does not exist, and the red icon and strikethrough are added by the plugin.
Move the mouse pointer over the links to see the pop-up notes, and use your browser's DOM inspector to see the inserted markup.
The source for the above behavior:
<script type="text/javascript"> // map file extensions to Font Awesome icons classes var classmap = { pdf: "fa fa-file-pdf-o", txt: "fa fa-file-text", doc: "fa fa-file-word-o", docx: "fa fa-file-word-o", xls: "fa fa-file-excel-o", xlsx: "fa fa-file-excel-o", jpg: "fa fa-file-image-o" }; var success = function(data) { // Decorate link with icon for file type, and popup showing size $(this).append(" <i class='" + classmap[data.ext] + "'></i><span class='popup'>[" + data.EXT + ": " + data.formattedSize + "]</span>"); }; var fail = function() { // Decorate missing link with warning $(this).append(" <i class='fa fa-exclamation-triangle'></i>") .append("<span class='popup'>This file is missing</span>") .addClass("missing"); }; // Decorate document links using the above callbacks $("a:pathStartsWith(/test/documents)") .addClass("document") .addExtensionClass() .decorate(success, fail) ; </script>