From 578f93b2f33652be2ab8e182becef7adb33b1e12 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Wed, 7 Jul 2021 10:19:36 +0530
Subject: [PATCH] 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                           |  8 +-------
 static/templates/left_sidebar.hbs              |  4 ++--
 static/templates/message_controls.hbs          |  4 ++--
 static/templates/recent_topic_row.hbs          | 14 +++++++-------
 static/templates/user_info_popover_content.hbs |  2 +-
 5 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/static/js/tippyjs.js b/static/js/tippyjs.js
index dc85b80319..36a115fbdf 100644
--- a/static/js/tippyjs.js
+++ b/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();
diff --git a/static/templates/left_sidebar.hbs b/static/templates/left_sidebar.hbs
index ee1e328dcf..648047d4b6 100644
--- a/static/templates/left_sidebar.hbs
+++ b/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">
diff --git a/static/templates/message_controls.hbs b/static/templates/message_controls.hbs
index c3b169d1ed..c8cbcc928e 100644
--- a/static/templates/message_controls.hbs
+++ b/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-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-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' }}" aria-label="{{t 'Cancel' }}" role="button" tabindex="0"></i>
     </div>
 
     {{#unless msg/locally_echoed}}
diff --git a/static/templates/recent_topic_row.hbs b/static/templates/recent_topic_row.hbs
index b0f152d045..1e0c592935 100644
--- a/static/templates/recent_topic_row.hbs
+++ b/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>
diff --git a/static/templates/user_info_popover_content.hbs b/static/templates/user_info_popover_content.hbs
index 780b491053..3e2327e4a7 100644
--- a/static/templates/user_info_popover_content.hbs
+++ b/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>