diff --git a/templates/web/common/macros.html.twig b/templates/web/common/macros.html.twig
index 87920f693d..fba7aa281e 100644
--- a/templates/web/common/macros.html.twig
+++ b/templates/web/common/macros.html.twig
@@ -117,12 +117,12 @@
 {% endmacro %}
 
 {% macro caption(record, can_see_business, display_exif) %}
+    <dl class="dl-horizontal">
     {% for name, value in record.getCaption(caption_field_order(record, can_see_business)) %}
-        <div class="desc">
-            <b>{{ name }}</b> :
-            {{ caption_field(record, name, value)|e|highlight }}
-        </div>
+        <dt>{{ name }}</dt>
+        <dd>{{ caption_field(record, name, value)|e|highlight }}</dd>
     {% endfor %}
+    </dl>
     {% if display_exif|default(true) and app.getAuthenticator().user is not none and user_setting('technical_display') == 'group' %}
         <hr/>
         {% include 'common/technical_datas.html.twig' %}
diff --git a/templates/web/common/technical_datas.html.twig b/templates/web/common/technical_datas.html.twig
index b01978ac16..2eb459cb22 100644
--- a/templates/web/common/technical_datas.html.twig
+++ b/templates/web/common/technical_datas.html.twig
@@ -1,145 +1,135 @@
+<dl class="dl-horizontal">
 {% if record.story %}
-  {{ 'Story_id' | trans }} : {{ record.recordId }}<br/>
+  <dt>{{ 'Story_id' | trans }}</dt><dd>{{ record.recordId }}</dd>
 {% else %}
-  {{ 'Record_id' | trans }} : {{ record.recordId }}<br/>
+    <dt>{{ 'Record_id' | trans }}</dt><dd>{{ record.recordId }}</dd>
 {% endif %}
 
 {% if not record.story %}
     {% block td_original_name %}
-        {{ 'Nom Original' | trans }} : {{ record.originalName }}
+        <dt>{{ 'Nom Original' | trans }}</dt><dd class="break-word">{{ record.originalName }}</dd>
     {% endblock %}
 
     {%  block td_mime %}
-        {{ record.mimeType }}
+        <dt>{{ 'Mime type' | trans }}</dt><dd>{{ record.mimeType }}</dd>
     {% endblock %}
 
     {% block td_weight %}
         {# @todo we should index document weight as well #}
     {% endblock %}
-    <br/>
 
     {% block td_size %}
-        {% set width = record.exif[constant('media_subdef::TC_DATA_WIDTH')]|default(null) %}
+        <dt>{{ 'Size' | trans }}</dt><dd>{% set width = record.exif[constant('media_subdef::TC_DATA_WIDTH')]|default
+        (null) %}
         {% set height = record.exif[constant('media_subdef::TC_DATA_HEIGHT')]|default(null) %}
         {% if width is not none and height is not none %}
             {{ width ~ " x " ~ height }}
-        {% endif %}
+        {% endif %}</dd>
     {%  endblock %}
+    </dl>
         <hr/>
+    <dl class="dl-horizontal">
     {% block td_camera_model %}
         {% if record.exif[constant('media_subdef::TC_DATA_CAMERAMODEL')] is defined %}
-          {{ 'Camera Model' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_CAMERAMODEL')] }}
-          <br />
+            <dt>{{ 'Camera Model' | trans }}</dt>
+            <dd>{{ record.exif[constant('media_subdef::TC_DATA_CAMERAMODEL')] }}</dd>
         {% endif %}
     {% endblock %}
     {% block td_color_space %}
         {% if record.exif[constant('media_subdef::TC_DATA_COLORSPACE')] is defined %}
-          {{ 'Color space' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_COLORSPACE')] }}
-          <br />
+          <dt>{{ 'Color space' | trans }}</dt>
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_COLORSPACE')] }}</dd>
         {% endif %}
     {% endblock %}
     {% block td_channels %}
         {% if record.exif[constant('media_subdef::TC_DATA_CHANNELS')] is defined %}
-          {{ 'Channels' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_CHANNELS')] }}
+          <dt>{{ 'Channels' | trans }}</dt>
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_CHANNELS')] }}</dd>
           <br />
         {% endif %}
     {% endblock %}
     {% block td_color_depth %}
         {% if record.exif[constant('media_subdef::TC_DATA_COLORDEPTH')] is defined %}
-          {{ 'Color Depth' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_COLORDEPTH')] }} bits
-          <br />
+          <dt>{{ 'Color Depth' | trans }}</dt>
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_COLORDEPTH')] }} bits</dd>
         {% endif %}
     {% endblock %}
     {% block td_iso_sensibility %}
         {% if record.exif[constant('media_subdef::TC_DATA_ISO')] is defined %}
-          {{ 'ISO sensibility' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_ISO')] }}
-          <br />
+          <dt>{{ 'ISO sensibility' | trans }}</dt>
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_ISO')] }}</dd>
         {% endif %}
     {% endblock %}
     {% block td_flash %}
         {% if record.exif[constant('media_subdef::TC_DATA_FLASHFIRED')] is defined %}
-          {{ 'Flash' | trans }} :
-          {% if record.exif[constant('media_subdef::TC_DATA_FLASHFIRED')] %}
+          <dt>{{ 'Flash' | trans }}</dt>
+          <dd>{% if record.exif[constant('media_subdef::TC_DATA_FLASHFIRED')] %}
             {{ 'yes' | trans }}
           {% else %}
             {{ 'no' | trans }}
           {% endif %}
-          <br />
+          </dd>
         {% endif %}
     {% endblock %}
     {% block td_shutter_speed %}
         {% if record.exif[constant('media_subdef::TC_DATA_SHUTTERSPEED')] is defined %}
-            {{ 'Shutter speed' | trans }} :
-            {{ record.exif[constant('media_subdef::TC_DATA_SHUTTERSPEED')] }} s.
-            <br />
+            <dt>{{ 'Shutter speed' | trans }}</dt>
+            <dd>{{ record.exif[constant('media_subdef::TC_DATA_SHUTTERSPEED')] }} s.</dd>
         {% endif %}
     {% endblock %}
     {% block td_apeture %}
         {% if record.exif[constant('media_subdef::TC_DATA_APERTURE')] is defined %}
-          {{ 'Aperture' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_APERTURE')] | round(2) }}
-          <br />
+          <dt>{{ 'Aperture' | trans }}</dt>
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_APERTURE')] | round(2) }}</dd>
         {% endif %}
     {% endblock %}
     {% block td_focal_length %}
         {% if record.exif[constant('media_subdef::TC_DATA_FOCALLENGTH')] is defined %}
-            {{ 'Focal length' | trans }} :
-            {{ record.exif[constant('media_subdef::TC_DATA_FOCALLENGTH')] }} mm
-            <br />
+            <dt>{{ 'Focal length' | trans }}</dt>
+            <dd>{{ record.exif[constant('media_subdef::TC_DATA_FOCALLENGTH')] }} mm</dd>
         {% endif %}
     {% endblock %}
     {% block td_hyperfocal_distance %}
         {% if record.exif[constant('media_subdef::TC_DATA_HYPERFOCALDISTANCE')] is defined %}
-          {{ 'Hyperfocal distance' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_HYPERFOCALDISTANCE')] | round(2) }} mm
-          <br />
+          <dt>{{ 'Hyperfocal distance' | trans }}</dt>
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_HYPERFOCALDISTANCE')] | round(2) }} mm</dd>
         {% endif %}
     {% endblock %}
     {% block td_light_value %}
         {% if record.exif[constant('media_subdef::TC_DATA_LIGHTVALUE')] is defined %}
-          {{ 'Light Value' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_LIGHTVALUE')] | round(2) }}
-          <br />
+          <dt>{{ 'Light Value' | trans }}</dt>
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_LIGHTVALUE')] | round(2) }}</dd>
         {% endif %}
     {% endblock %}
     {% block td_duration %}
         {% if record.exif[constant('media_subdef::TC_DATA_DURATION')] is defined %}
-          {{ 'Duree' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_DURATION')] }}
-          <br />
+          <dt>{{ 'Duree' | trans }} :
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_DURATION')] }}</dd>
         {% endif %}
     {% endblock %}
     {% block td_framerate %}
         {% if record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] is defined %}
-          {{ 'Images par secondes' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }} ips
-          <br />
+          <dt>{{ 'Images par secondes' | trans }}</dt>
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_FRAMERATE')] | round(2) }} ips</dd>
         {% endif %}
     {% endblock %}
     {% block td_codec_audio %}
         {% if record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] is defined %}
-          {{ 'Codec Audio' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }}
-          <br />
+          <dt>{{ 'Codec Audio' | trans }}</dt>
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOCODEC')] }}</dd>
         {% endif %}
     {% endblock %}
     {% block td_codec_video %}
         {% if record.exif[constant('media_subdef::TC_DATA_VIDEOCODEC')] is defined %}
-          {{ 'Codec Video' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_VIDEOCODEC')] }}
-          <br />
+          <dt>{{ 'Codec Video' | trans }}</dt>
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_VIDEOCODEC')] }}</dd>
         {% endif %}
     {% endblock %}
     {% block td_audio_rate %}
         {% if record.exif[constant('media_subdef::TC_DATA_AUDIOSAMPLERATE')] is defined %}
-          {{ 'Frequence d\'echantillonage' | trans }} :
-          {{ record.exif[constant('media_subdef::TC_DATA_AUDIOSAMPLERATE')] | round(2) }} kHz
-          <br />
+          <dt>{{ 'Frequence d\'echantillonage' | trans }}</dt>
+          <dd>{{ record.exif[constant('media_subdef::TC_DATA_AUDIOSAMPLERATE')] | round(2) }} kHz</dd>
         {% endif %}
     {% endblock %}
 {% endif %}
+</dl>
\ No newline at end of file
diff --git a/www/include/jquery.tooltip.js b/www/include/jquery.tooltip.js
index fd1eaa8b35..c22d43fe8b 100644
--- a/www/include/jquery.tooltip.js
+++ b/www/include/jquery.tooltip.js
@@ -92,6 +92,17 @@
             })
                 .mouseover(save)
                 .mouseout(hide)
+                .mouseleave(function () {
+                    if (settings.isBrowsable) {
+                        $.tooltip.currentHover = false;
+                        // close caption container after a small delay
+                        // (safe travel delay of the mouse between thumbnail and caption / allow user to cross
+                        // boundaries without unexpected closing of the catpion)
+                        setTimeout(function () {
+                            hide();
+                        }, 500);
+                    }
+                })
                 .mousedown(fix);
         },
         fixPNG: IE ? function () {
@@ -282,6 +293,23 @@
             });
 
             if (event) {
+                var $origEventTarget = $(event.target);
+
+                // since event target can have different positionning, try to get common closest parent:
+                var $eventTarget = $origEventTarget.closest('.diapo'),
+                    topOffset = 20,
+                    leftOffset = 20;
+
+                if( $eventTarget ) {
+                    // change offsets:
+                    topOffset = -8;
+                    leftOffset = -8;
+                } else {
+                    // fallback on original target if nothing found:
+                    $eventTarget = $origEventTarget;
+                }
+
+
 
                 var vert, vertS, hor, horS, top, left, ratioH, ratioV;
                 //			ratio = $(h).width()/$(h).height();
@@ -290,29 +318,29 @@
                 var ratioImage = $(h).width() / $(h).height();
 
                 //position de l'image
-                if ($(event.target).offset().left > (v.x - $(event.target).offset().left - $(event.target).width())) {
+                if ($eventTarget.offset().left > (v.x - $eventTarget.offset().left - $eventTarget.width())) {
                     hor = 'gauche';
-                    wiH = $(event.target).offset().left;
+                    wiH = $eventTarget.offset().left;
 
                     horS = wiH * v.y;
                     ratioSurfaceH = wiH / v.y;
                 }
                 else {
                     hor = 'droite';
-                    wiH = (v.x - $(event.target).offset().left - $(event.target).width());
+                    wiH = (v.x - $eventTarget.offset().left - $eventTarget.width());
                     horS = wiH * v.y;
                     ratioSurfaceH = wiH / v.y;
 
                 }
-                if ($(event.target).offset().top > (v.y - $(event.target).offset().top - $(event.target).height())) {
+                if ($eventTarget.offset().top > (v.y - $eventTarget.offset().top - $eventTarget.height())) {
                     vert = 'haut';
-                    heV = $(event.target).offset().top;
+                    heV = $eventTarget.offset().top;
                     vertS = heV * v.x;
                     ratioSurfaceV = v.x / heV;
                 }
                 else {
                     vert = 'bas';
-                    heV = (v.y - $(event.target).offset().top - $(event.target).height());
+                    heV = (v.y - $eventTarget.offset().top - $eventTarget.height());
                     vertS = heV * v.x;
                     ratioSurfaceV = v.x / heV;
                 }
@@ -341,17 +369,18 @@
                     var zL = event.pageX;
                     var zW = $(h).width();
                     zH = $(h).height();
-                    var ETOT = $(event.target).offset().top;
-                    var ETH = $(event.target).height();
+                    var ETOT = $eventTarget.offset().top;
+                    var ETH = $eventTarget.height();
                     left = (zL - zW / 2) < 20 ? 20 : (((zL + zW / 2 + 20) > v.x) ? (v.x - zW - 20) : (zL - zW / 2));
+
                     switch (vert) {
                         case 'haut':
                             height = (zH > (ETOT - 40)) ? (ETOT - 40) : zH;
-                            top = ETOT - height - 20;
+                            top = ETOT - height - topOffset;
                             break;
                         case 'bas':
                             height = ((v.y - ETH - ETOT - 40) > zH) ? zH : (v.y - ETH - ETOT - 40);
-                            top = ETOT + ETH + 20;
+                            top = ETOT + ETH + topOffset;
                             break;
                         default:
                             break;
@@ -361,18 +390,18 @@
                     //				height = ($(h).height()>(v.y-40))?(v.y-40):$(h).height();
                     zH = $(h).height();
                     var zT = event.pageY;
-                    var EOTL = $(event.target).offset().left;
-                    var ETW = $(event.target).width();
+                    var EOTL = $eventTarget.offset().left;
+                    var ETW = $eventTarget.width();
                     var zw = $(h).width();
                     top = (zT - zH / 2) < 20 ? 20 : (((zT + zH / 2 + 20) > v.y) ? (v.y - zH - 20) : (zT - zH / 2));
                     switch (hor) {
                         case 'gauche':
                             width = (zw > (EOTL - 40)) ? (EOTL - 40) : zw;
-                            left = EOTL - width - 20;
+                            left = EOTL - width - leftOffset;
                             break;
                         case 'droite':
                             width = ((v.x - ETW - EOTL - 40) > zw) ? zw : (v.x - ETW - EOTL - 40);
-                            left = EOTL + ETW + 20;
+                            left = EOTL + ETW + leftOffset;
                             break;
                         default:
                             break;
@@ -473,9 +502,14 @@
             helper.parent.show();
         }
 
-
         $(helper.parent[0])
+            .unbind('mouseenter')
             .unbind('mouseleave')
+            .mouseenter(function(){
+                if (settings($.tooltip.current).isBrowsable) {
+                    $.tooltip.currentHover = true;
+                }
+            })
             .mouseleave(function () {
                 if (settings($.tooltip.current).isBrowsable) {
                     // if tooltip has scrollable content or selectionnable text - should be closed on mouseleave:
@@ -589,6 +623,7 @@
 
     // hide helper and restore added classes and the title
     function hide(event) {
+
         if( $.tooltip.currentHover && settings($.tooltip.current).isBrowsable ) {
             return;
         }
@@ -597,6 +632,7 @@
             return;
 
         $(helper.parent[0])
+            .unbind('mouseenter')
             .unbind('mouseleave');
 
         // clear timeout if possible
diff --git a/www/skins/prod/Prod.css b/www/skins/prod/Prod.css
index 121e6a74bc..7d1a9735b2 100644
--- a/www/skins/prod/Prod.css
+++ b/www/skins/prod/Prod.css
@@ -23,3 +23,36 @@
     overflow: auto;
     overflow-x: hidden;
 }
+
+.popover-inner .popover-content dl.dl-horizontal  {
+    margin-top: 0;
+    margin-bottom: 0;
+
+}
+
+.popover-inner .popover-content dl.dl-horizontal:first-child{
+    border-top: none;
+}
+
+.popover-inner .popover-content .dl-horizontal dt {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    color: #808080;
+    text-align: left;
+    width: 100px ;
+    /*border-bottom: 1px solid #333;*/
+}
+
+.popover-inner .popover-content .dl-horizontal dd {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    margin-left: 120px;
+}
+
+.break-word {
+    word-wrap: break-word;
+}
+
+.ui-button:focus, .ui-button-text:focus {
+    outline: none;
+}