drafts: Replace notification when saving a draft.

The old logic, inline in the compose area, has produced a very weird
effect where the buttons would move to fit the notification, ever
since design changes to use the full bottom row space.

We address this by just using a Tippy tooltip instead.

static/js/drafts.js

@@ -1,6 +1,7 @@
 import {subDays} from "date-fns";
 import Handlebars from "handlebars/runtime";
 import $ from "jquery";
+import tippy from "tippy.js";
 
 import render_draft_table_body from "../templates/draft_table_body.hbs";
 
@@ -137,8 +138,17 @@ export function restore_message(draft) {
 }
 
 function draft_notify() {
-    $(".alert-draft").css("display", "inline-block");
+    // Display a tooltip to notify the user about the saved draft.
-    $(".alert-draft").delay(1000).fadeOut(500);
+    const instance = tippy(".compose_drafts_button", {
+        content: $t({defaultMessage: "Saved as draft"}),
+        arrow: true,
+        placement: "top",
+    })[0];
+    instance.show();
+    function remove_instance() {
+        instance.destroy();
+    }
+    setTimeout(remove_instance, 1500);
 }
 
 export function update_draft() {

static/styles/compose.css

@@ -24,14 +24,6 @@
         .message-control-link {
             float: left;
         }
-
-        .alert-draft {
-            font-size: 14px;
-            color: hsl(170, 48%, 54%);
-            padding: 0 12px;
-            font-weight: 400;
-            display: none;
-        }
     }
 
     .reply_button_container {

static/templates/compose.hbs

@@ -44,7 +44,6 @@
                 <a class="drafts-link no-underline button small rounded compose_drafts_button" href="#drafts" title="{{t 'Drafts' }} (d)">
                     {{t 'Drafts' }}
                 </a>
-                <span class="alert-draft pull-left">{{t 'Saved as draft' }}</span>
             </span>
         </div>
     </div>