tippy: Insert tooltip element directly in .message_reaction.

Instead of inserting tooltip inside `body`, we directly insert
it inside the `reference` element. This helps us to automatically
hide the tooltip when we hide the `reference` element.

This avoids the bug of tooltip persisting when the message reaction
is removed while the tooltip is active.

To reproduce:
* React 👍 to a message.
* Hover over the reaction.
* Press `+` from keyboard.

You will see reaction tooltip persisting while the reaction is hidden,
also "Add emoji" icon is displayed with tooltip.

Doing the same for elements which are inside a simplebar container
and for which tooltips can span outside the simplebar container,
makes the tooltips not visible or cut at the edges of simplebar
container since simplebar containers have overflow set to `hidden`.
This is something that cannot fixed as per
https://github.com/Grsmto/simplebar/issues/347

So, for simplebar contained elements we insert the tooltip to
`body`.

`reference` element: Element for which tooltip is displayed.

static/js/tippyjs.js

@@ -53,5 +53,8 @@ export function initialize() {
             const title = reactions.get_reaction_title_data(message_id, local_id);
             instance.setContent(title);
         },
+        // Insert directly into the `.message_reaction` element so
+        // that when the reaction is hidden, tooltip hides as well.
+        appendTo: (reference) => reference,
     });
 }