diff --git a/web/src/stream_ui_updates.js b/web/src/stream_ui_updates.js
index faad1eed1a..fd84784943 100644
--- a/web/src/stream_ui_updates.js
+++ b/web/src/stream_ui_updates.js
@@ -1,4 +1,5 @@
import $ from "jquery";
+import tippy from "tippy.js";
import render_announce_stream_checkbox from "../templates/stream_settings/announce_stream_checkbox.hbs";
import render_stream_privacy_icon from "../templates/stream_settings/stream_privacy_icon.hbs";
@@ -20,26 +21,11 @@ export function initialize_disable_btn_hint_popover(
$disabled_btn,
hint_text,
) {
- // Disabled button blocks mouse events(hover) from reaching
- // to it's parent div element, so popover don't get triggered.
- // Add css to prevent this.
- $disabled_btn.css("pointer-events", "none");
- $popover_btn.popover({
- placement: "bottom",
- content: $("
").addClass("sub_disable_btn_hint").text(hint_text).prop("outerHTML"),
- trigger: "manual",
- html: true,
+ tippy($btn_wrapper[0], {
+ content: hint_text,
animation: false,
- });
-
- $btn_wrapper.on("mouseover", (e) => {
- $popover_btn.popover("show");
- e.stopPropagation();
- });
-
- $btn_wrapper.on("mouseout", (e) => {
- $popover_btn.popover("hide");
- e.stopPropagation();
+ hideOnClick: false,
+ placement: "bottom",
});
}
@@ -101,7 +87,7 @@ export function update_settings_button_for_sub(sub) {
}
if (stream_data.can_toggle_subscription(sub)) {
$settings_button.prop("disabled", false);
- $settings_button.popover("destroy");
+ $settings_button.parent()[0]._tippy?.destroy();
$settings_button.css("pointer-events", "");
} else {
$settings_button.attr("title", "");
@@ -289,13 +275,14 @@ export function enable_or_disable_add_subscribers_elements(
const $add_subscribers_button = $container_elem
.find('button[name="add_subscriber"]')
.expectOne();
+ const $add_subscribers_container = $(".edit_subscribers_for_stream .subscriber_list_settings");
$input_element.prop("contenteditable", enable_elem);
$add_subscribers_button.prop("disabled", !enable_elem);
if (enable_elem) {
$add_subscribers_button.css("pointer-events", "");
- $input_element.popover("destroy");
+ $add_subscribers_container[0]?._tippy?.destroy();
$container_elem.find(".add_subscribers_container").removeClass("add_subscribers_disabled");
} else {
$container_elem.find(".add_subscribers_container").addClass("add_subscribers_disabled");
diff --git a/web/src/user_group_ui_updates.js b/web/src/user_group_ui_updates.js
index f9f755898c..e5fba94bed 100644
--- a/web/src/user_group_ui_updates.js
+++ b/web/src/user_group_ui_updates.js
@@ -37,7 +37,7 @@ export function update_add_members_elements(group) {
$input_element.prop("disabled", false);
$button_element.prop("disabled", false);
$button_element.css("pointer-events", "");
- $input_element.popover("destroy");
+ $add_members_container[0]._tippy?.destroy();
} else {
$input_element.prop("disabled", true);
$button_element.prop("disabled", true);