traslate: Show disabled save button reason more prominently

Tooltip is not really a good place for this as people do not notice it
and it is typically not accessible on touch devices.

Fixes WeblateOrg#10165

docs/changes.rst

@@ -22,6 +22,7 @@ Not yet released.
 * Show plural form examples more prominently.
 * Highlight whitespace in :ref:`machine-translation`.
 * Faster comment and component removal.
+* Show disabled save button reason more prominently.
 
 **Bug fixes**
 

weblate/templates/translate.html

@@ -188,16 +188,20 @@ <h4 class="panel-title">
         </div>
       {% endif %}
     {% endwith %}
+    {% if locked %}
+        <p class="text-danger">{% trans "This translation is currently locked." %}</p>
+    {% elif not user_can_translate and not user_can_edit_flags %}
+        <p class="text-danger">{{ user_can_translate.reason }}</p>
+    {% elif not user_can_translate and user_can_edit_flags and not unit.translation.component.is_glossary %}
+        <p class="text-danger">{% trans "Insufficient privileges for saving translations." %}</p>
+    {% endif %}
     <button class="btn btn-primary" type="submit" name="save" tabindex="150"
     {% if locked %}
         disabled="disabled"
-        title="{% trans "This translation is currently locked." %}"
     {% elif not user_can_translate and not user_can_edit_flags %}
         disabled="disabled"
-        title="{{ user_can_translate.reason }}"
     {% elif not user_can_translate and user_can_edit_flags and not unit.translation.component.is_glossary %}
         disabled="disabled"
-        title="{% trans "Insufficient privileges for saving translations." %}"
     {% endif %}
     > {% trans "Save and continue" %}</button>