diff --git a/web/src/add_stream_options_popover.ts b/web/src/add_stream_options_popover.ts
index bf596bad56..cfb8b7becc 100644
--- a/web/src/add_stream_options_popover.ts
+++ b/web/src/add_stream_options_popover.ts
@@ -1,6 +1,6 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
-import type {ReferenceElement} from "tippy.js";
+import type * as tippy from "tippy.js";
 
 import render_left_sidebar_stream_setting_popover from "../templates/popovers/left_sidebar/left_sidebar_stream_setting_popover.hbs";
 
@@ -33,14 +33,14 @@ export function initialize(): void {
             //  When showing the popover menu, we want the
             // "Add channels" and the "Filter channels" tooltip
             //  to appear below the "Add channels" icon.
-            const add_streams_tooltip: ReferenceElement | undefined =
+            const add_streams_tooltip: tippy.ReferenceElement | undefined =
                 $("#add_streams_tooltip").get(0);
             assert(add_streams_tooltip !== undefined);
             add_streams_tooltip._tippy?.setProps({
                 placement: "bottom",
             });
 
-            const filter_streams_tooltip: (ReferenceElement & HTMLElement) | undefined =
+            const filter_streams_tooltip: (tippy.ReferenceElement & HTMLElement) | undefined =
                 $("#filter_streams_tooltip").get(0);
             // If `filter_streams_tooltip` is not triggered yet, this will set its initial placement.
             assert(filter_streams_tooltip !== undefined);
@@ -58,14 +58,14 @@ export function initialize(): void {
             //  "Add channels" and the "Filter channels" tooltip
             //  to appear at it's original position that is
             //  above the "Add channels" icon.
-            const add_streams_tooltip: ReferenceElement | undefined =
+            const add_streams_tooltip: tippy.ReferenceElement | undefined =
                 $("#add_streams_tooltip").get(0);
             assert(add_streams_tooltip !== undefined);
             add_streams_tooltip._tippy?.setProps({
                 placement: "top",
             });
 
-            const filter_streams_tooltip: (ReferenceElement & HTMLElement) | undefined =
+            const filter_streams_tooltip: (tippy.ReferenceElement & HTMLElement) | undefined =
                 $("#filter_streams_tooltip").get(0);
             assert(filter_streams_tooltip !== undefined);
             filter_streams_tooltip.dataset.tippyPlacement = "top";
diff --git a/web/src/admin.js b/web/src/admin.js
index 73054a0b69..9e41f6f49b 100644
--- a/web/src/admin.js
+++ b/web/src/admin.js
@@ -1,5 +1,5 @@
 import $ from "jquery";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 import render_admin_tab from "../templates/settings/admin_tab.hbs";
 import render_settings_organization_settings_tip from "../templates/settings/organization_settings_tip.hbs";
@@ -272,7 +272,7 @@ export function build_page() {
             }),
         };
 
-        tippy($("#realm_can_access_all_users_group_widget_container")[0], opts);
+        tippy.default($("#realm_can_access_all_users_group_widget_container")[0], opts);
     }
 }
 
diff --git a/web/src/bootstrap_typeahead.ts b/web/src/bootstrap_typeahead.ts
index 6f32bc3433..7c82f52973 100644
--- a/web/src/bootstrap_typeahead.ts
+++ b/web/src/bootstrap_typeahead.ts
@@ -138,8 +138,7 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
 import {insertTextIntoField} from "text-field-edit";
-import type {Instance} from "tippy.js";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 import {get_string_diff} from "./util";
 
@@ -234,7 +233,7 @@ export class Typeahead<ItemType extends string | object> {
     advanceKeyCodes: number[];
     non_tippy_parent_element: string | undefined;
     values: WeakMap<HTMLElement, ItemType>;
-    instance: Instance | undefined;
+    instance: tippy.Instance | undefined;
 
     constructor(input_element: TypeaheadInputElement, options: TypeaheadOptions<ItemType>) {
         this.input_element = input_element;
@@ -341,7 +340,7 @@ export class Typeahead<ItemType extends string | object> {
             // We don't need tippy to position typeaheads which already know where they should be.
             return this;
         }
-        this.instance = tippy(this.input_element.$element[0], {
+        this.instance = tippy.default(this.input_element.$element[0], {
             // Lets typeahead take the width needed to fit the content
             // and wraps it if it overflows the visible container.
             maxWidth: "none",
diff --git a/web/src/buddy_list.ts b/web/src/buddy_list.ts
index 946f51e058..ff8aae59bd 100644
--- a/web/src/buddy_list.ts
+++ b/web/src/buddy_list.ts
@@ -1,6 +1,6 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 import render_section_header from "../templates/buddy_list/section_header.hbs";
 import render_view_all_subscribers from "../templates/buddy_list/view_all_subscribers.hbs";
@@ -166,7 +166,7 @@ export class BuddyList extends BuddyListConf {
                     // This will default to "bottom" placement for this tooltip.
                     placement = "auto";
                 }
-                tippy($elem[0], {
+                tippy.default($elem[0], {
                     // Because the buddy list subheadings are potential click targets
                     // for purposes having nothing to do with the subscriber count
                     // (collapsing/expanding), we delay showing the tooltip until the
diff --git a/web/src/click_handlers.js b/web/src/click_handlers.js
index 3de9975c3c..b1733b7c77 100644
--- a/web/src/click_handlers.js
+++ b/web/src/click_handlers.js
@@ -1,6 +1,6 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 // You won't find every click handler here, but it's a good place to start!
 
@@ -519,7 +519,7 @@ export function initialize() {
             // This will default to "bottom" placement for this tooltip.
             placement = "auto";
         }
-        tippy($elem[0], {
+        tippy.default($elem[0], {
             // Quickly display and hide right sidebar tooltips
             // so that they don't stick and overlap with
             // each other.
diff --git a/web/src/common.ts b/web/src/common.ts
index e99a00019d..1df24fea16 100644
--- a/web/src/common.ts
+++ b/web/src/common.ts
@@ -1,6 +1,5 @@
 import $ from "jquery";
-import type {ReferenceElement} from "tippy.js";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 import {$t} from "./i18n";
 
@@ -123,8 +122,8 @@ function set_password_toggle_label(
 ): void {
     $(password_selector).attr("aria-label", label);
     if (tippy_tooltips) {
-        const element: ReferenceElement = $(password_selector)[0];
-        const tippy_instance = element._tippy ?? tippy(element);
+        const element: tippy.ReferenceElement = $(password_selector)[0];
+        const tippy_instance = element._tippy ?? tippy.default(element);
         tippy_instance.setContent(label);
     } else {
         $(password_selector).attr("title", label);
diff --git a/web/src/compose_popovers.js b/web/src/compose_popovers.js
index ee5e9abd6b..275e4e1c0a 100644
--- a/web/src/compose_popovers.js
+++ b/web/src/compose_popovers.js
@@ -1,5 +1,5 @@
 import $ from "jquery";
-import {delegate} from "tippy.js";
+import * as tippy from "tippy.js";
 
 import render_compose_control_buttons_popover from "../templates/popovers/compose_control_buttons/compose_control_buttons_popover.hbs";
 import render_mobile_message_buttons_popover from "../templates/popovers/mobile_message_buttons_popover.hbs";
@@ -16,7 +16,7 @@ export function initialize() {
     // compose box buttons popover shown on mobile widths.
     // We want this click event to propagate and hide other popovers
     // that could possibly obstruct user from using this popover.
-    delegate("body", {
+    tippy.delegate("body", {
         ...popover_menus.default_popover_props,
         // Attach the click event to `.mobile_button_container`, since
         // the button (`.compose_mobile_button`) already has a hover
diff --git a/web/src/compose_recipient.ts b/web/src/compose_recipient.ts
index 64fcd26358..fb8e06ee0f 100644
--- a/web/src/compose_recipient.ts
+++ b/web/src/compose_recipient.ts
@@ -3,7 +3,7 @@
 import $ from "jquery";
 import _, {isNumber} from "lodash";
 import assert from "minimalistic-assert";
-import type {Instance, Placement} from "tippy.js";
+import type * as tippy from "tippy.js";
 
 import render_inline_decorated_stream_name from "../templates/inline_decorated_stream_name.hbs";
 
@@ -238,7 +238,7 @@ export function possibly_update_stream_name_in_compose(stream_id: number): void
     }
 }
 
-function item_click_callback(event: JQuery.ClickEvent, dropdown: Instance): void {
+function item_click_callback(event: JQuery.ClickEvent, dropdown: tippy.Instance): void {
     const recipient_id_str = $(event.currentTarget).attr("data-unique-id");
     assert(recipient_id_str !== undefined);
     let recipient_id: string | number = recipient_id_str;
@@ -273,7 +273,7 @@ function get_options_for_recipient_widget(): Option[] {
     return options;
 }
 
-function compose_recipient_dropdown_on_show(dropdown: Instance): void {
+function compose_recipient_dropdown_on_show(dropdown: tippy.Instance): void {
     // Offset to display dropdown above compose.
     let top_offset = 5;
     const window_height = window.innerHeight;
@@ -285,7 +285,7 @@ function compose_recipient_dropdown_on_show(dropdown: Instance): void {
     // pixels below compose starting from top of compose box.
     const bottom_space = window_height - recipient_input_top - search_box_and_padding_height;
     // Show dropdown on top / bottom based on available space.
-    let placement: Placement = "top-start";
+    let placement: tippy.Placement = "top-start";
     if (bottom_space > top_space) {
         placement = "bottom-start";
         top_offset = -30;
diff --git a/web/src/compose_send_menu_popover.js b/web/src/compose_send_menu_popover.js
index ebe0b38aac..03621c3a76 100644
--- a/web/src/compose_send_menu_popover.js
+++ b/web/src/compose_send_menu_popover.js
@@ -1,5 +1,5 @@
 import $ from "jquery";
-import {delegate} from "tippy.js";
+import * as tippy from "tippy.js";
 
 import render_send_later_popover from "../templates/popovers/send_later_popover.hbs";
 import render_send_later_modal from "../templates/send_later_modal.hbs";
@@ -142,7 +142,7 @@ export function toggle() {
 }
 
 export function initialize() {
-    delegate("body", {
+    tippy.delegate("body", {
         ...popover_menus.default_popover_props,
         target: "#send_later i",
         onUntrigger() {
diff --git a/web/src/compose_tooltips.ts b/web/src/compose_tooltips.ts
index 22f86c1231..9796461a6f 100644
--- a/web/src/compose_tooltips.ts
+++ b/web/src/compose_tooltips.ts
@@ -1,7 +1,7 @@
 import $ from "jquery";
 import _ from "lodash";
 import assert from "minimalistic-assert";
-import {delegate} from "tippy.js";
+import * as tippy from "tippy.js";
 
 import render_drafts_tooltip from "../templates/drafts_tooltip.hbs";
 import render_narrow_to_compose_recipients_tooltip from "../templates/narrow_to_compose_recipients_tooltip.hbs";
@@ -17,7 +17,7 @@ import {parse_html} from "./ui_util";
 import {user_settings} from "./user_settings";
 
 export function initialize(): void {
-    delegate("body", {
+    tippy.delegate("body", {
         target: [
             // Ideally this would be `#compose_buttons .button`, but the
             // reply button's actual area is its containing span.
@@ -34,7 +34,7 @@ export function initialize(): void {
             instance.destroy();
         },
     });
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#compose_buttons .compose-reply-button-wrapper",
         delay: EXTRA_LONG_HOVER_DELAY,
         // Only show on mouseenter since for spectators, clicking on these
@@ -81,7 +81,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#new_conversation_button",
         delay: EXTRA_LONG_HOVER_DELAY,
         // Only show on mouseenter since for spectators, clicking on these
@@ -115,7 +115,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         // Only display Tippy content on classes accompanied by a `data-` attribute.
         target: `
         .compose_control_button[data-tooltip-template-id],
@@ -149,7 +149,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".send-control-button",
         delay: LONG_HOVER_DELAY,
         placement: "top",
@@ -176,7 +176,7 @@ export function initialize(): void {
         appendTo: () => document.body,
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#compose-send-button",
         delay: EXTRA_LONG_HOVER_DELAY,
         // By default, tippyjs uses a trigger value of "mouseenter focus",
@@ -198,7 +198,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".narrow_to_compose_recipients",
         delay: LONG_HOVER_DELAY,
         appendTo: () => document.body,
@@ -236,7 +236,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         // TODO: Might need to target just the Send button itself
         // in the new design
         target: ".disabled-message-send-controls",
diff --git a/web/src/copied_tooltip.ts b/web/src/copied_tooltip.ts
index 3869386fd9..a8076c8772 100644
--- a/web/src/copied_tooltip.ts
+++ b/web/src/copied_tooltip.ts
@@ -1,4 +1,4 @@
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 import {$t} from "./i18n";
 
@@ -8,7 +8,7 @@ export function show_copied_confirmation(
     timeout_in_ms = 1000,
 ): void {
     // Display a tooltip to notify the user the message or code was copied.
-    const instance = tippy(copy_button, {
+    const instance = tippy.default(copy_button, {
         placement: "top",
         appendTo: () => document.body,
         onUntrigger() {
diff --git a/web/src/drafts.ts b/web/src/drafts.ts
index 13488b068e..f2bc712100 100644
--- a/web/src/drafts.ts
+++ b/web/src/drafts.ts
@@ -2,7 +2,7 @@ import {subDays} from "date-fns";
 import $ from "jquery";
 import _ from "lodash";
 import assert from "minimalistic-assert";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 import {z} from "zod";
 
 import render_confirm_delete_all_drafts from "../templates/confirm_dialog/confirm_delete_all_drafts.hbs";
@@ -364,7 +364,7 @@ export function restore_message(draft: LocalStorageDraft): ComposeArguments {
 
 function draft_notify(): void {
     // Display a tooltip to notify the user about the saved draft.
-    const instance = tippy(".top_left_drafts .unread_count", {
+    const instance = tippy.default(".top_left_drafts .unread_count", {
         content: $t({defaultMessage: "Saved as draft"}),
         arrow: true,
         placement: "right",
diff --git a/web/src/integration_url_modal.ts b/web/src/integration_url_modal.ts
index 4601854bc7..f5304fc4fc 100644
--- a/web/src/integration_url_modal.ts
+++ b/web/src/integration_url_modal.ts
@@ -1,6 +1,6 @@
 import ClipboardJS from "clipboard";
 import $ from "jquery";
-import type {Instance} from "tippy.js";
+import type * as tippy from "tippy.js";
 
 import render_generate_integration_url_modal from "../templates/settings/generate_integration_url_modal.hbs";
 import render_integration_events from "../templates/settings/integration_events.hbs";
@@ -177,7 +177,7 @@ export function show_generate_integration_url_modal(api_key: string): void {
 
         function integration_item_click_callback(
             event: JQuery.ClickEvent,
-            dropdown: Instance,
+            dropdown: tippy.Instance,
         ): void {
             integration_input_dropdown_widget.render();
             $(".integration-url-name-wrapper").trigger("input");
@@ -214,7 +214,10 @@ export function show_generate_integration_url_modal(api_key: string): void {
             return options;
         }
 
-        function stream_item_click_callback(event: JQuery.ClickEvent, dropdown: Instance): void {
+        function stream_item_click_callback(
+            event: JQuery.ClickEvent,
+            dropdown: tippy.Instance,
+        ): void {
             stream_input_dropdown_widget.render();
             $(".integration-url-stream-wrapper").trigger("input");
             const user_selected_option = stream_input_dropdown_widget.value();
diff --git a/web/src/message_list_tooltips.ts b/web/src/message_list_tooltips.ts
index d03b02497a..72d75891b4 100644
--- a/web/src/message_list_tooltips.ts
+++ b/web/src/message_list_tooltips.ts
@@ -1,7 +1,6 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
-import {delegate} from "tippy.js";
-import type * as tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 import render_change_visibility_policy_button_tooltip from "../templates/change_visibility_policy_button_tooltip.hbs";
 import render_message_edit_notice_tooltip from "../templates/message_edit_notice_tooltip.hbs";
@@ -44,7 +43,7 @@ const store_message_list_instances_plugin = {
 
 function message_list_tooltip(target: string, props: Partial<tippy.Props> = {}): void {
     const {onShow, ...other_props} = props;
-    delegate("body", {
+    tippy.delegate("body", {
         target,
         appendTo: () => document.body,
         plugins: [store_message_list_instances_plugin],
diff --git a/web/src/personal_menu_popover.js b/web/src/personal_menu_popover.js
index f5bbe93781..4e43ddde14 100644
--- a/web/src/personal_menu_popover.js
+++ b/web/src/personal_menu_popover.js
@@ -1,5 +1,5 @@
 import $ from "jquery";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 import render_navbar_personal_menu_popover from "../templates/popovers/navbar/navbar_personal_menu_popover.hbs";
 
@@ -37,7 +37,7 @@ export function initialize() {
             const $popper = $(instance.popper);
             popover_menus.popover_instances.personal_menu = instance;
 
-            tippy(".personal-menu-clear-status", {
+            tippy.default(".personal-menu-clear-status", {
                 placement: "top",
                 appendTo: document.body,
             });
diff --git a/web/src/playground_links_popover.ts b/web/src/playground_links_popover.ts
index dd52f95aaa..bfc4c7bfd5 100644
--- a/web/src/playground_links_popover.ts
+++ b/web/src/playground_links_popover.ts
@@ -1,5 +1,5 @@
 import $ from "jquery";
-import type {Instance as PopoverInstance, ReferenceElement} from "tippy.js";
+import type * as tippy from "tippy.js";
 import url_template_lib from "url-template";
 
 import render_playground_links_popover from "../templates/popovers/playground_links_popover.hbs";
@@ -12,13 +12,13 @@ import * as ui_util from "./ui_util";
 
 type RealmPlaygroundWithURL = RealmPlayground & {playground_url: string};
 
-let playground_links_popover_instance: PopoverInstance;
+let playground_links_popover_instance: tippy.Instance;
 
 // Playground_store contains all the data we need to generate a popover of
 // playground links for each code block. The element is the target element
 // to pop off of.
 function toggle_playground_links_popover(
-    element: ReferenceElement,
+    element: tippy.ReferenceElement,
     playground_store: Map<number, RealmPlaygroundWithURL>,
 ): void {
     if (is_open()) {
diff --git a/web/src/popover_menus.ts b/web/src/popover_menus.ts
index 52fd1b8549..8f1846ac97 100644
--- a/web/src/popover_menus.ts
+++ b/web/src/popover_menus.ts
@@ -3,8 +3,7 @@
    popovers system in popovers.js. */
 
 import $ from "jquery";
-import type {Instance as PopoverInstance, Props as PopoverProps, ReferenceElement} from "tippy.js";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 import * as blueslip from "./blueslip";
 import {media_breakpoints_num} from "./css_variables";
@@ -31,7 +30,7 @@ type PopoverName =
     | "gear_menu"
     | "help_menu";
 
-export const popover_instances: Record<PopoverName, PopoverInstance | null> = {
+export const popover_instances: Record<PopoverName, tippy.Instance | null> = {
     compose_control_buttons: null,
     starred_messages: null,
     drafts: null,
@@ -85,23 +84,20 @@ export function focus_first_popover_item($items: JQuery, index = 0): void {
     $items.eq(index).expectOne().trigger("focus");
 }
 
-export function sidebar_menu_instance_handle_keyboard(
-    instance: PopoverInstance,
-    key: string,
-): void {
+export function sidebar_menu_instance_handle_keyboard(instance: tippy.Instance, key: string): void {
     const items = get_popover_items_for_instance(instance);
     popover_items_handle_keyboard(key, items);
 }
 
-export function get_visible_instance(): PopoverInstance | null | undefined {
+export function get_visible_instance(): tippy.Instance | null | undefined {
     return Object.values(popover_instances).find(Boolean);
 }
 
-export function get_topic_menu_popover(): PopoverInstance | null {
+export function get_topic_menu_popover(): tippy.Instance | null {
     return popover_instances.topics_menu;
 }
 
-export function get_scheduled_messages_popover(): PopoverInstance | null {
+export function get_scheduled_messages_popover(): tippy.Instance | null {
     return popover_instances.send_later;
 }
 
@@ -109,11 +105,11 @@ export function is_scheduled_messages_popover_displayed(): boolean | undefined {
     return popover_instances.send_later?.state.isVisible;
 }
 
-export function get_compose_control_buttons_popover(): PopoverInstance | null {
+export function get_compose_control_buttons_popover(): tippy.Instance | null {
     return popover_instances.compose_control_buttons;
 }
 
-export function get_starred_messages_popover(): PopoverInstance | null {
+export function get_starred_messages_popover(): tippy.Instance | null {
     return popover_instances.starred_messages;
 }
 
@@ -125,7 +121,7 @@ export function is_gear_menu_popover_displayed(): boolean | undefined {
     return popover_instances.gear_menu?.state.isVisible;
 }
 
-export function get_gear_menu_instance(): PopoverInstance | null {
+export function get_gear_menu_instance(): tippy.Instance | null {
     return popover_instances.gear_menu;
 }
 
@@ -137,7 +133,7 @@ export function is_message_actions_popover_displayed(): boolean | undefined {
     return popover_instances.message_actions?.state.isVisible;
 }
 
-function get_popover_items_for_instance(instance: PopoverInstance): JQuery | undefined {
+function get_popover_items_for_instance(instance: tippy.Instance): JQuery | undefined {
     const $current_elem = $(instance.popper);
     const class_name = $current_elem.attr("class");
 
@@ -149,7 +145,7 @@ function get_popover_items_for_instance(instance: PopoverInstance): JQuery | und
     return $current_elem.find("a, [tabindex='0']").filter(":visible");
 }
 
-export function hide_current_popover_if_visible(instance: PopoverInstance | null): void {
+export function hide_current_popover_if_visible(instance: tippy.Instance | null): void {
     // Call this function instead of `instance.hide` to avoid tippy
     // logging about the possibility of already hidden instances,
     // which can occur when a click handler does a hide_all().
@@ -158,7 +154,7 @@ export function hide_current_popover_if_visible(instance: PopoverInstance | null
     }
 }
 
-export const default_popover_props: Partial<PopoverProps> = {
+export const default_popover_props: Partial<tippy.Props> = {
     delay: 0,
     appendTo: () => document.body,
     trigger: "click",
@@ -186,7 +182,7 @@ export const default_popover_props: Partial<PopoverProps> = {
                 requires: ["$$tippy"],
                 fn({state}) {
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                    const instance = (state.elements.reference as ReferenceElement)._tippy!;
+                    const instance = (state.elements.reference as tippy.ReferenceElement)._tippy!;
                     const $popover = $(state.elements.popper);
                     const $tippy_box = $popover.find(".tippy-box");
                     if ($tippy_box.hasClass("show-when-reference-hidden")) {
@@ -281,7 +277,7 @@ export const left_sidebar_tippy_options = {
     },
 };
 
-export function on_show_prep(instance: PopoverInstance): void {
+export function on_show_prep(instance: tippy.Instance): void {
     $(instance.popper).on("click", (e) => {
         // Popover is not hidden on click inside it unless the click handler for the
         // element explicitly hides the popover when handling the event.
@@ -297,8 +293,8 @@ export function on_show_prep(instance: PopoverInstance): void {
 }
 
 function get_props_for_popover_centering(
-    popover_props: Partial<PopoverProps>,
-): Partial<PopoverProps> {
+    popover_props: Partial<tippy.Props>,
+): Partial<tippy.Props> {
     return {
         arrow: false,
         getReferenceClientRect: () => new DOMRect(0, 0, 0, 0),
@@ -364,10 +360,10 @@ function get_props_for_popover_centering(
 // Toggles a popover menu directly; intended for use in keyboard
 // shortcuts and similar alternative ways to open a popover menu.
 export function toggle_popover_menu(
-    target: ReferenceElement,
-    popover_props: Partial<PopoverProps>,
+    target: tippy.ReferenceElement,
+    popover_props: Partial<tippy.Props>,
     options?: {show_as_overlay_on_mobile: boolean},
-): PopoverInstance {
+): tippy.Instance {
     const instance = target._tippy;
     if (instance) {
         hide_current_popover_if_visible(instance);
@@ -391,7 +387,7 @@ export function toggle_popover_menu(
         ];
     }
 
-    return tippy(target, {
+    return tippy.default(target, {
         ...default_popover_props,
         showOnCreate: true,
         ...popover_props,
@@ -401,7 +397,7 @@ export function toggle_popover_menu(
 
 // Main function to define a popover menu, opened via clicking on the
 // target selector.
-export function register_popover_menu(target: string, popover_props: Partial<PopoverProps>): void {
+export function register_popover_menu(target: string, popover_props: Partial<tippy.Props>): void {
     // For some elements, such as the click target to open the message
     // actions menu, we want to avoid propagating the click event to
     // parent elements. Tippy's built-in `delegate` method does not
diff --git a/web/src/portico/help.js b/web/src/portico/help.js
index 58fc1cb42f..ec12bea10b 100644
--- a/web/src/portico/help.js
+++ b/web/src/portico/help.js
@@ -1,7 +1,7 @@
 import ClipboardJS from "clipboard";
 import $ from "jquery";
 import SimpleBar from "simplebar";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 import copy_to_clipboard_svg from "../../templates/copy_to_clipboard_svg.hbs";
 import * as common from "../common";
@@ -46,14 +46,14 @@ function add_copy_to_clipboard_element($codehilite) {
     });
 
     // Show a tippy tooltip when the button is hovered
-    const tooltip_copy = tippy($copy_button[0], {
+    const tooltip_copy = tippy.default($copy_button[0], {
         content: "Copy code",
         trigger: "mouseenter",
         placement: "top",
     });
 
     // Show a tippy tooltip when the code is copied
-    const tooltip_copied = tippy($copy_button[0], {
+    const tooltip_copied = tippy.default($copy_button[0], {
         content: "Copied!",
         trigger: "manual",
         placement: "top",
diff --git a/web/src/portico/tippyjs.ts b/web/src/portico/tippyjs.ts
index e8aae7010f..3573873eae 100644
--- a/web/src/portico/tippyjs.ts
+++ b/web/src/portico/tippyjs.ts
@@ -1,8 +1,8 @@
 import $ from "jquery";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 function initialize(): void {
-    tippy("[data-tippy-content]", {
+    tippy.default("[data-tippy-content]", {
         // Same defaults as set in web app tippyjs module.
         maxWidth: 300,
         delay: [100, 20],
diff --git a/web/src/settings_components.ts b/web/src/settings_components.ts
index 63328c0e0f..9a7b24c270 100644
--- a/web/src/settings_components.ts
+++ b/web/src/settings_components.ts
@@ -1,7 +1,6 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
-import type {PopperElement, Props} from "tippy.js";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 import {z} from "zod";
 
 import render_compose_banner from "../templates/compose_banner/compose_banner.hbs";
@@ -1158,12 +1157,14 @@ function enable_or_disable_save_button($subsection_elem: JQuery): void {
         disable_save_btn = should_disable_save_button_for_time_limit_settings(time_limit_settings);
     } else if ($subsection_elem.attr("id") === "org-other-settings") {
         disable_save_btn = should_disable_save_button_for_jitsi_server_url_setting();
-        const $button_wrapper = $subsection_elem.find<PopperElement>(".subsection-changes-save");
+        const $button_wrapper = $subsection_elem.find<tippy.PopperElement>(
+            ".subsection-changes-save",
+        );
         const tippy_instance = $button_wrapper[0]._tippy;
         if (disable_save_btn) {
             // avoid duplication of tippy
             if (!tippy_instance) {
-                const opts: Partial<Props> = {placement: "top"};
+                const opts: Partial<tippy.Props> = {placement: "top"};
                 initialize_disable_btn_hint_popover(
                     $button_wrapper,
                     $t({defaultMessage: "Cannot save invalid Jitsi server URL."}),
@@ -1183,9 +1184,9 @@ function enable_or_disable_save_button($subsection_elem: JQuery): void {
 export function initialize_disable_btn_hint_popover(
     $btn_wrapper: JQuery,
     hint_text: string | undefined,
-    opts: Partial<Props>,
+    opts: Partial<tippy.Props>,
 ): void {
-    const tippy_opts: Partial<Props> = {
+    const tippy_opts: Partial<tippy.Props> = {
         animation: false,
         hideOnClick: false,
         placement: "bottom",
@@ -1197,5 +1198,5 @@ export function initialize_disable_btn_hint_popover(
     if (hint_text !== undefined) {
         tippy_opts.content = hint_text;
     }
-    tippy($btn_wrapper[0], tippy_opts);
+    tippy.default($btn_wrapper[0], tippy_opts);
 }
diff --git a/web/src/stats/stats.ts b/web/src/stats/stats.ts
index d1c9b3cc85..b8245825fe 100644
--- a/web/src/stats/stats.ts
+++ b/web/src/stats/stats.ts
@@ -3,7 +3,7 @@ import assert from "minimalistic-assert";
 import PlotlyBar from "plotly.js/lib/bar";
 import Plotly from "plotly.js/lib/core";
 import PlotlyPie from "plotly.js/lib/pie";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 import {z} from "zod";
 
 import * as blueslip from "../blueslip";
@@ -224,7 +224,7 @@ function update_last_full_update(end_times: number[]): void {
 }
 
 $(() => {
-    tippy(".last_update_tooltip", {
+    tippy.default(".last_update_tooltip", {
         // Same defaults as set in our tippyjs module.
         maxWidth: 300,
         delay: [100, 20],
diff --git a/web/src/tippyjs.ts b/web/src/tippyjs.ts
index 79bb206413..26b3eaa1c1 100644
--- a/web/src/tippyjs.ts
+++ b/web/src/tippyjs.ts
@@ -1,7 +1,6 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
-import type {ReferenceElement} from "tippy.js";
-import tippy, {delegate} from "tippy.js";
+import * as tippy from "tippy.js";
 
 import render_buddy_list_title_tooltip from "../templates/buddy_list/title_tooltip.hbs";
 import render_org_logo_tooltip from "../templates/org_logo_tooltip.hbs";
@@ -52,7 +51,7 @@ export const EXTRA_LONG_HOVER_DELAY: [number, number] = [1500, 20];
 // 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({
+tippy.default.setDefaultProps({
     // Tooltips shouldn't take more space than mobile widths.
     maxWidth: 300,
     delay: INSTANT_HOVER_DELAY,
@@ -85,14 +84,14 @@ export function initialize(): void {
     // * Set `data-tippy-content="{{t 'Tooltip content' }}"`, often
     //   replacing a `title` attribute on an element that had both.
     // * Set placement; we typically use `data-tippy-placement="top"`.
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".tippy-zulip-tooltip",
     });
 
     // variant of tippy-zulip-tooltip above having delay=LONG_HOVER_DELAY,
     // default placement="top" with fallback placement="bottom",
     // and appended to body
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".tippy-zulip-delayed-tooltip",
         // Disable trigger on focus, to avoid displaying on-click.
         trigger: "mouseenter",
@@ -110,7 +109,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".toggle-subscription-tooltip",
         trigger: "mouseenter",
         delay: EXTRA_LONG_HOVER_DELAY,
@@ -118,7 +117,7 @@ export function initialize(): void {
         placement: "bottom",
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".tippy-left-sidebar-tooltip",
         placement: "right",
         delay: EXTRA_LONG_HOVER_DELAY,
@@ -139,7 +138,7 @@ export function initialize(): void {
     // this element doesn't have an always visible label, and
     // thus hovering it is a way to find out what it does, give
     // it the faster LONG_HOVER_DELAY.
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#show_all_private_messages",
         placement: "right",
         delay: LONG_HOVER_DELAY,
@@ -158,7 +157,7 @@ export function initialize(): void {
 
     // Variant of .tippy-left-sidebar-tooltip configuration. Here
     // we need to dynamically check which view is the home view.
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".tippy-views-tooltip",
         placement: "right",
         delay: EXTRA_LONG_HOVER_DELAY,
@@ -189,7 +188,7 @@ export function initialize(): void {
     // below specify the target directly, elements using those should
     // not have the tippy-zulip-tooltip class.
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".draft-selection-tooltip",
         delay: LONG_HOVER_DELAY,
         appendTo: () => document.body,
@@ -203,7 +202,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".delete-selected-drafts-button-container",
         appendTo: () => document.body,
         onShow(instance) {
@@ -216,7 +215,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#add-poll-modal .dialog_submit_button_container",
         appendTo: () => document.body,
         onShow(instance) {
@@ -235,7 +234,7 @@ export function initialize(): void {
     $("body").on(
         "blur",
         ".message_control_button, .delete-selected-drafts-button-container",
-        function (this: ReferenceElement) {
+        function (this: tippy.ReferenceElement) {
             // Remove tooltip when user is trying to tab through all the icons.
             // If user tabs slowly, tooltips are displayed otherwise they are
             // destroyed before they can be displayed.
@@ -243,7 +242,7 @@ export function initialize(): void {
         },
     );
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: [
             "#streams_header .streams-tooltip-target",
             "#scroll-to-bottom-button-clickable-area",
@@ -258,7 +257,7 @@ export function initialize(): void {
         appendTo: () => document.body,
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: [
             "#compose_top_right [data-tippy-content]",
             "#compose_top_right [data-tooltip-template-id]",
@@ -270,7 +269,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".media-info-wrapper > .media-description > .title",
         appendTo: () => document.body,
         onShow(instance) {
@@ -294,7 +293,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         // Configure tooltips for the stream_sorter_toggle buttons.
 
         // TODO: Ideally, we'd extend this to be a common mechanism for
@@ -309,7 +308,7 @@ export function initialize(): void {
         appendTo: () => document.body,
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         // This tooltip appears on the "Summary" checkboxes in
         // settings > custom profile fields, when at the limit of 2
         // fields with display_in_profile_summary enabled.
@@ -331,7 +330,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#full_name_input_container.disabled_setting_tooltip",
         content: $t({
             defaultMessage:
@@ -343,7 +342,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#change_email_button_container.disabled_setting_tooltip",
         content: $t({defaultMessage: "Email address changes are disabled in this organization."}),
         appendTo: () => document.body,
@@ -352,7 +351,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: [
             "#deactivate_account_container.disabled_setting_tooltip",
             "#edit-user-form .deactivate_user_button_tooltip",
@@ -367,7 +366,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#deactivate_realm_button_container.disabled_setting_tooltip",
         content: $t({
             defaultMessage: "Only organization owners may deactivate an organization.",
@@ -378,7 +377,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".settings-radio-input-parent.default_stream_private_tooltip",
         content: $t({
             defaultMessage: "Default channels for new users cannot be made private.",
@@ -389,7 +388,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".default-stream.default_stream_private_tooltip",
         content: $t({
             defaultMessage: "Private channels cannot be default channels for new users.",
@@ -400,7 +399,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "[data-tab-key='invite-link-tab'].disabled",
         content: $t({
             defaultMessage:
@@ -412,7 +411,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: [
             "#api_key_button_container.disabled_setting_tooltip",
             "#user_email_address_dropdown_container.disabled_setting_tooltip",
@@ -426,7 +425,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "[data-tab-key='invite-email-tab'].disabled",
         content: $t({
             defaultMessage:
@@ -438,7 +437,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".views-tooltip-target",
         onShow(instance) {
             if ($("#toggle-top-left-navigation-area-icon").hasClass("fa-caret-down")) {
@@ -455,7 +454,7 @@ export function initialize(): void {
         appendTo: () => document.body,
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".dm-tooltip-target",
         onShow(instance) {
             if ($(".direct-messages-container").hasClass("zoom-in")) {
@@ -477,7 +476,7 @@ export function initialize(): void {
         appendTo: () => document.body,
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#stream_creation_form .add_subscribers_disabled",
         content: $t({
             defaultMessage:
@@ -489,7 +488,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".user_row .actions button",
         trigger: "mouseenter",
         onShow(instance) {
@@ -506,12 +505,12 @@ export function initialize(): void {
         appendTo: () => document.body,
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".user-card-status-area .status-emoji",
         appendTo: () => document.body,
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".status-emoji-name",
         placement: "top",
         delay: INSTANT_HOVER_DELAY,
@@ -534,7 +533,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         /*
             The tooltip for new user group button (+) icon button on #groups
             overlay was not mounted correctly as its sibling element (search bar)
@@ -549,7 +548,7 @@ export function initialize(): void {
         appendTo: () => document.body,
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#move_topic_to_stream_widget_wrapper",
         onShow(instance) {
             if ($("#move_topic_to_stream_widget").prop("disabled")) {
@@ -566,7 +565,7 @@ export function initialize(): void {
         appendTo: () => document.body,
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#userlist-header",
         placement: "top",
         appendTo: () => document.body,
@@ -578,7 +577,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#userlist-toggle",
         delay: LONG_HOVER_DELAY,
         placement: "bottom",
@@ -596,7 +595,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: "#realm-logo",
         placement: "right",
         appendTo: () => document.body,
@@ -612,7 +611,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".custom-user-field-label-wrapper.required-field-wrapper",
         content: $t({
             defaultMessage: "This profile field is required.",
@@ -623,7 +622,7 @@ export function initialize(): void {
         },
     });
 
-    delegate("body", {
+    tippy.delegate("body", {
         target: ".popover-contains-shift-hotkey",
         trigger: "mouseenter",
         placement: "top",
diff --git a/web/src/user_card_popover.js b/web/src/user_card_popover.js
index 838b9170d8..303166be33 100644
--- a/web/src/user_card_popover.js
+++ b/web/src/user_card_popover.js
@@ -2,7 +2,7 @@ import ClipboardJS from "clipboard";
 import {parseISO} from "date-fns";
 import $ from "jquery";
 import assert from "minimalistic-assert";
-import tippy from "tippy.js";
+import * as tippy from "tippy.js";
 
 import render_confirm_mute_user from "../templates/confirm_dialog/confirm_mute_user.hbs";
 import render_user_card_popover from "../templates/popovers/user_card/user_card_popover.hbs";
@@ -455,7 +455,7 @@ function init_email_tooltip(user) {
 
     $(".user_popover_email").each(function () {
         if (this.clientWidth < this.scrollWidth) {
-            tippy(this, {
+            tippy.default(this, {
                 placement: "bottom",
                 content: people.get_visible_email(user),
                 interactive: true,
diff --git a/web/src/user_group_popover.ts b/web/src/user_group_popover.ts
index 385a5b532b..b7ee3b7545 100644
--- a/web/src/user_group_popover.ts
+++ b/web/src/user_group_popover.ts
@@ -1,6 +1,6 @@
 import $ from "jquery";
 import assert from "minimalistic-assert";
-import type {Instance as PopoverInstance, ReferenceElement} from "tippy.js";
+import type * as tippy from "tippy.js";
 
 import render_user_group_info_popover from "../templates/popovers/user_group_info_popover.hbs";
 
@@ -17,7 +17,7 @@ import * as ui_util from "./ui_util";
 import * as user_groups from "./user_groups";
 import * as util from "./util";
 
-let user_group_popover_instance: PopoverInstance | undefined;
+let user_group_popover_instance: tippy.Instance | undefined;
 
 type PopoverGroupMember = User & {user_circle_class: string; user_last_seen_time_status: string};
 
@@ -57,7 +57,7 @@ export function handle_keyboard(key: string): void {
 // in case of message, message_id is the message id containing it;
 // in case of user group pill, message_id is not used;
 export function toggle_user_group_info_popover(
-    element: ReferenceElement,
+    element: tippy.ReferenceElement,
     message_id: number | undefined,
 ): void {
     if (is_open()) {