tippy: Set default placement of tooltips to top.

Generally, tooltips placed at top look good. If the tooltip cannot
fit at top, it will by default be placed at opposite side.

Removed the unnecessary top placement definitions.

static/js/tippyjs.js

@@ -18,7 +18,7 @@ tippy.setDefaultProps({
     // Some delay to showing / hiding the tooltip makes
     // it look less forced and more natural.
     delay: [100, 20],
-    placement: "auto",
+    placement: "top",
 
     // disable animations to make the
     // tooltips feel snappy
@@ -111,7 +111,6 @@ export function initialize() {
 
     delegate("body", {
         target: ".compose_control_button",
-        placement: "top",
         // Add some additional delay when they open
         // so that regular users don't have to see
         // them unless they want to.
@@ -120,7 +119,6 @@ export function initialize() {
 
     delegate("body", {
         target: ".message_control_button",
-        placement: "top",
         // Add some additional delay when they open
         // so that regular users don't have to see
         // them unless they want to.
@@ -154,7 +152,6 @@ export function initialize() {
 
     delegate("body", {
         target: ".message_time",
-        placement: "top",
         appendTo: () => document.body,
         onShow(instance) {
             const time_elem = $(instance.reference);
@@ -170,7 +167,6 @@ export function initialize() {
 
     delegate("body", {
         target: ".recipient_row_date > span",
-        placement: "top",
         appendTo: () => document.body,
         onHidden(instance) {
             instance.destroy();
@@ -182,14 +178,12 @@ export function initialize() {
     // box or it is not limited by the parent container.
     delegate("body", {
         target: [".recipient_bar_icon", ".sidebar-title", "#user_filter_icon"],
-        placement: "top",
         appendTo: () => document.body,
     });
 
     delegate("body", {
         target: ".rendered_markdown time",
         allowHTML: true,
-        placement: "top",
         appendTo: () => document.body,
         onHidden(instance) {
             instance.destroy();

static/templates/left_sidebar.hbs

@@ -60,10 +60,10 @@
         </ul>
         <div id="streams_list" class="zoom-out">
             <div id="streams_header" class="zoom-in-hide"><h4 class="sidebar-title" data-tippy-content="{{t 'Filter streams' }} (q)">{{t 'STREAMS' }}</h4>
-                <span class="tippy-zulip-tooltip streams_inline_cog_wrapper hidden-for-spectators" data-tippy-content="{{t 'Add streams' }}" data-tippy-placement="top">
+                <span class="tippy-zulip-tooltip streams_inline_cog_wrapper hidden-for-spectators" data-tippy-content="{{t 'Add streams' }}">
                     <i id="streams_inline_cog" class='fa fa-plus' aria-hidden="true" ></i>
                 </span>
-                <i class="streams_filter_icon fa fa-filter tippy-zulip-tooltip" aria-hidden="true" data-tippy-content="{{t 'Filter streams' }} (q)" data-tippy-placement="top"></i>
+                <i class="streams_filter_icon fa fa-filter tippy-zulip-tooltip" aria-hidden="true" data-tippy-content="{{t 'Filter streams' }} (q)"></i>
                 <div class="input-append notdisplayed stream_search_section">
                     <input class="stream-list-filter home-page-input" type="text" autocomplete="off" placeholder="{{t 'Filter streams' }}" />
                     <button type="button" class="btn clear_search_button" id="clear_search_stream_button">

static/templates/message_controls.hbs

@@ -16,8 +16,8 @@
     {{/unless}}
 
     <div class="message_failed message_control_button {{#unless msg.failed_request}}notvisible{{/unless}}">
-        <i class="fa fa-refresh refresh-failed-message tippy-zulip-tooltip" data-tippy-content="{{t 'Retry' }}" data-tippy-placement="top" aria-label="{{t 'Retry' }}" role="button" tabindex="0"></i>
+        <i class="fa fa-refresh refresh-failed-message tippy-zulip-tooltip" data-tippy-content="{{t 'Retry' }}" aria-label="{{t 'Retry' }}" role="button" tabindex="0"></i>
-        <i class="fa fa-times-circle remove-failed-message tippy-zulip-tooltip" data-tippy-content="{{t 'Cancel' }}" data-tippy-placement="top" aria-label="{{t 'Cancel' }}" role="button" tabindex="0"></i>
+        <i class="fa fa-times-circle remove-failed-message tippy-zulip-tooltip" data-tippy-content="{{t 'Cancel' }}" aria-label="{{t 'Cancel' }}" role="button" tabindex="0"></i>
     </div>
 
     {{#unless msg/locally_echoed}}

static/templates/recent_topic_row.hbs

@@ -17,13 +17,13 @@
                 <div class="recent_topic_actions">
                     <div class="recent_topics_focusable">
                         {{#if topic_muted}}
-                        <i class="fa fa-bell-slash on_hover_topic_unmute recipient_bar_icon tippy-zulip-tooltip" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Unmute topic' }}" data-tippy-placement="top" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
+                        <i class="fa fa-bell-slash on_hover_topic_unmute recipient_bar_icon tippy-zulip-tooltip" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Unmute topic' }}" role="button" tabindex="0" aria-label="{{t 'Unmute topic' }}"></i>
                         {{else}}
-                        <i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon tippy-zulip-tooltip" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mute topic' }}" data-tippy-placement="top" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
+                        <i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon tippy-zulip-tooltip" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mute topic' }}" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
                         {{/if}}
                     </div>
                     <div class="recent_topics_focusable">
-                        <i class="fa fa-check-circle on_hover_topic_read recipient_bar_icon tippy-zulip-tooltip" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mark as read' }}" data-tippy-placement="top" role="button" tabindex="0" aria-label="{{t 'Mark as read' }}"></i>
+                        <i class="fa fa-check-circle on_hover_topic_read recipient_bar_icon tippy-zulip-tooltip" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mark as read' }}" role="button" tabindex="0" aria-label="{{t 'Mark as read' }}"></i>
                     </div>
                 </div>
             </div>
@@ -32,17 +32,17 @@
     <td class='recent_topic_users'>
         <ul class="recent_topics_participants">
             {{#if other_senders_count}}
-            <li class="recent_topics_participant_item tippy-zulip-tooltip" data-tippy-content="{{other_sender_names}}" data-tippy-placement="top" data-tippy-allowHtml="true">
+            <li class="recent_topics_participant_item tippy-zulip-tooltip" data-tippy-content="{{other_sender_names}}" data-tippy-allowHtml="true">
                 <span class="recent_topics_participant_overflow">+{{other_senders_count}}</span>
             </li>
             {{/if}}
             {{#each senders}}
                 {{#if this.is_muted}}
-                <li class="recent_topics_participant_item tippy-zulip-tooltip" data-tippy-content="{{t 'Muted user'}}" data-tippy-placement="top">
+                <li class="recent_topics_participant_item tippy-zulip-tooltip" data-tippy-content="{{t 'Muted user'}}">
                     <span><i class="fa fa-user recent_topics_participant_overflow"></i></span>
                 </li>
                 {{else}}
-                <li class="recent_topics_participant_item tippy-zulip-tooltip" data-tippy-content="{{this.full_name}}" data-tippy-placement="top">
+                <li class="recent_topics_participant_item tippy-zulip-tooltip" data-tippy-content="{{this.full_name}}">
                     <img src="{{this.avatar_url_small}}" class="recent_topics_participant_avatar" />
                 </li>
                 {{/if}}
@@ -50,7 +50,7 @@
         </ul>
     </td>
     <td class="recent_topic_timestamp">
-        <div class="last_msg_time tippy-zulip-tooltip" data-tippy-content="{{this.full_last_msg_date_time}}" data-tippy-placement="top">
+        <div class="last_msg_time tippy-zulip-tooltip" data-tippy-content="{{this.full_last_msg_date_time}}">
             {{ last_msg_time }}
         </div>
     </td>

static/templates/user_info_popover_content.hbs

@@ -7,7 +7,7 @@
                 {{#if is_bot}}
                 <i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
                 {{else}}
-                <span class="{{user_circle_class}} user_circle popover_user_presence tippy-zulip-tooltip" data-tippy-content="{{user_last_seen_time_status}}" data-tippy-placement="top"></span>
+                <span class="{{user_circle_class}} user_circle popover_user_presence tippy-zulip-tooltip" data-tippy-content="{{user_last_seen_time_status}}"></span>
                 {{/if}}
             {{/if}}
         </li>