diff --git a/mayan/apps/appearance/templates/appearance/base.html b/mayan/apps/appearance/templates/appearance/base.html
index f78aaf7d98..733d926704 100644
--- a/mayan/apps/appearance/templates/appearance/base.html
+++ b/mayan/apps/appearance/templates/appearance/base.html
@@ -152,6 +152,11 @@
                 .btn-block {
                     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
                 }
+
+                .a-caption {
+                    color: white;
+                }
+
             </style>
             {% block stylesheets %}{% endblock %}
 
@@ -342,6 +347,9 @@
                 $('.scrollable').scrollview();
 
                 $('a.fancybox').fancybox({
+                    beforeShow : function(){
+                        this.title =  $(this.element).data('caption');
+                    },
                     openEffect  : 'elastic',
                     closeEffect : 'elastic',
                     prevEffect  : 'none',
diff --git a/mayan/apps/documents/widgets.py b/mayan/apps/documents/widgets.py
index dbdf1bbb39..962511a95b 100644
--- a/mayan/apps/documents/widgets.py
+++ b/mayan/apps/documents/widgets.py
@@ -127,7 +127,10 @@ def document_html_widget(document_page, click_view=None, click_view_arguments=No
     )
 
     if title:
-        title_template = 'title="%s"' % strip_tags(title)
+        preview_click_link = document.get_absolute_url()
+        title_template = 'data-caption="<a class=\'a-caption\' href=\'{url}\'>{title}</a>"'.format(
+            title=strip_tags(title), url=preview_click_link or '#'
+        )
     else:
         title_template = ''