tippyjs: Add library to be used for showing tooltips.

Our aim is to use this library to remove use of bootstrap-tooltip for showing popovers and tooltips. This will remove our dependency on bootstrap for showing tooltips. Thus, bootstrap can be upgrade more independently.
norbline · Apr 7, 2021 · 9c6f5d5 · 9c6f5d5
1 parent 54999f6
commit 9c6f5d5
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "stacktrace-gps": "^3.0.4",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^4.1.0",
+    "tippy.js": "^6.2.7",
     "turndown": "^7.0.0",
     "url-loader": "^4.1.1",
     "webfonts-loader": "^7.0.1",

diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js
@@ -22,6 +22,7 @@ import "../desktop_integration";
 import "../zulip_test";
 
 // Import styles
+import "tippy.js/dist/tippy.css";
 import "../../third/bootstrap-tooltip/tooltip.css";
 import "spectrum-colorpicker/spectrum.css";
 import "katex/dist/katex.css";

diff --git a/static/js/tippyjs.js b/static/js/tippyjs.js
@@ -0,0 +1,40 @@
+import tippy, {delegate} from "tippy.js";
+
+// We override the defaults set by tippy library here,
+// so make sure to check this too after checking tippyjs
+// documentation for default properties.
+tippy.setDefaultProps({
+    // We don't want tooltips
+    // to take more space than
+    // mobile widths ever.
+    maxWidth: 300,
+
+    // Some delay to showing / hiding the tooltip makes
+    // it look less forced and more natural.
+    delay: [100, 20],
+    placement: "auto",
+
+    // disable animations to make the
+    // tooltips feel snappy
+    animation: false,
+
+    // Show tooltips on long press on touch based
+    // devices.
+    touch: ["hold", 750],
+
+    // html content is not supported by default
+    // enable it by passing data-tippy-allowHtml="true"
+    // in the tag or a parameter.
+});
+
+export function initialize() {
+    delegate("body", {
+        // Add elements here which are not displayed on
+        // initial load but are displayed later through
+        // some means.
+        //
+        // Make all html elements having this class
+        // show tippy styled tooltip on hover.
+        target: ".tippy-zulip-tooltip",
+    });
+}
diff --git a/static/js/ui_init.js b/static/js/ui_init.js
@@ -65,6 +65,7 @@ import * as stream_edit from "./stream_edit";
 import * as stream_list from "./stream_list";
 import * as subs from "./subs";
 import * as timerender from "./timerender";
+import * as tippyjs from "./tippyjs";
 import * as topic_list from "./topic_list";
 import * as topic_zoom from "./topic_zoom";
 import * as tutorial from "./tutorial";
@@ -477,6 +478,7 @@ export function initialize_everything() {
 
     const user_status_params = pop_fields("user_status");
 
+    tippyjs.initialize();
     message_lists.initialize();
     alert_popup.initialize();
     alert_words.initialize(alert_words_params);

diff --git a/tools/test-js-with-node b/tools/test-js-with-node
@@ -147,6 +147,7 @@ EXEMPT_FILES = {
     "static/js/subs.js",
     "static/js/message_view_header.js",
     "static/js/timerender.js",
+    "static/js/tippyjs.js",
     "static/js/todo_widget.js",
     "static/js/topic_list.js",
     "static/js/topic_zoom.js",

diff --git a/tools/webpack.assets.json b/tools/webpack.assets.json
@@ -106,7 +106,8 @@
     "stats": [
         "./static/js/bundles/portico",
         "./static/styles/portico/stats.css",
-        "./static/js/stats/stats"
+        "./static/js/stats/stats",
+        "tippy.js/dist/tippy.css"
     ],
     "app": ["./static/js/bundles/app"],
     "digest": ["./static/js/bundles/portico"]

diff --git a/version.py b/version.py
@@ -45,4 +45,4 @@
 #   historical commits sharing the same major version, in which case a
 #   minor version bump suffices.
 
-PROVISION_VERSION = "136.0"
+PROVISION_VERSION = "136.1"
diff --git a/yarn.lock b/yarn.lock
@@ -1185,6 +1185,11 @@
     parse-rect "^1.2.0"
     pick-by-alias "^1.2.0"
 
+"@popperjs/core@^2.4.4":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
+  integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
+
 "@stylelint/postcss-css-in-js@^0.37.2":
   version "0.37.2"
   resolved "https://registry.yarnpkg.com/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz#7e5a84ad181f4234a2480803422a47b8749af3d2"
@@ -12552,6 +12557,13 @@ tinyqueue@^2.0.3:
   resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.3.tgz#64d8492ebf39e7801d7bd34062e29b45b2035f08"
   integrity sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==
 
+tippy.js@^6.2.7:
+  version "6.2.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.2.7.tgz#62fb34eda23f7d78151ddca922b62818c1ab9869"
+  integrity sha512-k+kWF9AJz5xLQHBi3K/XlmJiyu+p9gsCyc5qZhxxGaJWIW8SMjw1R+C7saUnP33IM8gUhDA2xX//ejRSwqR0tA==
+  dependencies:
+    "@popperjs/core" "^2.4.4"
+
 to-absolute-glob@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz#1865f43d9e74b0822db9f145b78cff7d0f7c849b"