Update sibling buttons

jet/static/jet/css/_changeform.scss

@@ -870,8 +870,51 @@ form .related-widget-wrapper ul {
   }
 
   &-button {
-    font-weight: bold;
-    vertical-align: middle;
+    &, &:visited, &:hover {
+      width: 120px;
+      vertical-align: middle;
+      box-sizing: border-box;
+    }
+
+    &-icon {
+      font-weight: bold;
+      vertical-align: middle;
+      line-height: 32px;
+
+      &.left {
+        float: left;
+      }
+
+      &.right {
+        float: right;
+      }
+    }
+
+    &-label {
+      display: block;
+      opacity: 0.5;
+      transition: opacity $transitions-duration;
+      text-align: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &-icon.left + &-label {
+      margin-left: 16px;
+    }
+
+    &-icon.right + &-label {
+      margin-right: 16px;
+    }
+
+    &:hover &-label {
+      opacity: 1;
+    }
+
+    &.disabled:hover &-label {
+      opacity: 0.5;
+    }
   }
 }
 

jet/templates/admin/base.html

@@ -115,14 +115,28 @@
     {% if change and show_siblings %}
         <div class="changeform-navigation">
             {% spaceless %}
-                {% jet_previous_object_url as url %}
-                <a{% if url %} href="{{ url }}"{% endif %} class="segmented-button left{% if not url %} disabled{% endif %}">
-                    <span class="changeform-navigation-button icon-arrow-left"></span>
+                {% jet_previous_object as sibling %}
+                <a{% if sibling.url %} href="{{ sibling.url }}"{% endif %} class="changeform-navigation-button segmented-button left{% if not sibling %} disabled{% endif %}" title="{{ sibling.label }}">
+                    <span class="changeform-navigation-button-icon left icon-arrow-left"></span>
+                    <span class="changeform-navigation-button-label">
+                        {% if sibling %}
+                            {{ sibling.label }}
+                        {% else %}
+                            {% trans "none" %}
+                        {% endif %}
+                    </span>
                 </a>
 
-                {% jet_next_object_url as url %}
-                <a{% if url %} href="{{ url }}"{% endif %} class="segmented-button right{% if not url %} disabled{% endif %}">
-                    <span class="changeform-navigation-button icon-arrow-right"></span>
+                {% jet_next_object as sibling %}
+                <a{% if sibling.url %} href="{{ sibling.url }}"{% endif %} class="changeform-navigation-button segmented-button right{% if not sibling %} disabled{% endif %}" title="{{ sibling.label }}">
+                    <span class="changeform-navigation-button-icon right icon-arrow-right"></span>
+                    <span class="changeform-navigation-button-label">
+                        {% if sibling %}
+                            {{ sibling.label }}
+                        {% else %}
+                            ---
+                        {% endif %}
+                    </span>
                 </a>
             {% endspaceless %}
         </div>

jet/templatetags/jet_tags.py

@@ -146,7 +146,7 @@ def jet_change_form_sibling_links_enabled():
     return settings.JET_CHANGE_FORM_SIBLING_LINKS
 
 
-def jet_sibling_object_url(context, next):
+def jet_sibling_object(context, next):
     original = context.get('original')
 
     if not original:
@@ -189,17 +189,20 @@ def jet_sibling_object_url(context, next):
     if preserved_filters_plain != '':
         url += '?' + preserved_filters_plain
 
-    return url
+    return {
+        'label': str(sibling_object),
+        'url': url
+    }
 
 
 @register.assignment_tag(takes_context=True)
-def jet_previous_object_url(context):
-    return jet_sibling_object_url(context, False)
+def jet_previous_object(context):
+    return jet_sibling_object(context, False)
 
 
 @register.assignment_tag(takes_context=True)
-def jet_next_object_url(context):
-    return jet_sibling_object_url(context, True)
+def jet_next_object(context):
+    return jet_sibling_object(context, True)
 
 
 @register.assignment_tag(takes_context=True)