Fix dynamically updating description tooltips

panel/models/button.ts

@@ -18,6 +18,22 @@ export class ButtonView extends BkButtonView {
     }
   }
 
+  override connect_signals(): void {
+    super.connect_signals()
+    const {tooltip} = this.model.properties
+    this.on_change(tooltip, () => this.update_tooltip())
+  }
+
+  async update_tooltip(): Promise<void> {
+    if (this.tooltip != null) {
+      this.tooltip.remove()
+    }
+    const {tooltip} = this.model
+    if (tooltip != null) {
+      this.tooltip = await build_view(tooltip, {parent: this})
+    }
+  }
+
   override async lazy_initialize(): Promise<void> {
     await super.lazy_initialize()
     const {tooltip} = this.model

panel/models/checkbox_button_group.ts

@@ -21,6 +21,22 @@ export class CheckboxButtonGroupView extends bkCheckboxButtonGroupView {
     }
   }
 
+  override connect_signals(): void {
+    super.connect_signals()
+    const {tooltip} = this.model.properties
+    this.on_change(tooltip, () => this.update_tooltip())
+  }
+
+  async update_tooltip(): Promise<void> {
+    if (this.tooltip != null) {
+      this.tooltip.remove()
+    }
+    const {tooltip} = this.model
+    if (tooltip != null) {
+      this.tooltip = await build_view(tooltip, {parent: this})
+    }
+  }
+
   override async lazy_initialize(): Promise<void> {
     await super.lazy_initialize()
     const {tooltip} = this.model

panel/models/icon.ts

@@ -56,11 +56,22 @@ export class ClickableIconView extends ControlView {
 
   override connect_signals(): void {
     super.connect_signals()
-    const {icon, active_icon, disabled, value, size} = this.model.properties
+    const {icon, active_icon, disabled, value, size, tooltip} = this.model.properties
     this.on_change([active_icon, icon, value], () => this.update_icon())
     this.on_change(this.model.properties.title, () => this.update_label())
     this.on_change(disabled, () => this.update_cursor())
     this.on_change(size, () => this.update_size())
+    this.on_change(tooltip, () => this.update_tooltip())
+  }
+
+  async update_tooltip(): Promise<void> {
+    if (this.tooltip != null) {
+      this.tooltip.remove()
+    }
+    const {tooltip} = this.model
+    if (tooltip != null) {
+      this.tooltip = await build_view(tooltip, {parent: this})
+    }
   }
 
   override render(): void {

panel/models/radio_button_group.ts

@@ -21,6 +21,22 @@ export class RadioButtonGroupView extends bkRadioButtonGroupView {
     }
   }
 
+  override connect_signals(): void {
+    super.connect_signals()
+    const {tooltip} = this.model.properties
+    this.on_change(tooltip, () => this.update_tooltip())
+  }
+
+  async update_tooltip(): Promise<void> {
+    if (this.tooltip != null) {
+      this.tooltip.remove()
+    }
+    const {tooltip} = this.model
+    if (tooltip != null) {
+      this.tooltip = await build_view(tooltip, {parent: this})
+    }
+  }
+
   override async lazy_initialize(): Promise<void> {
     await super.lazy_initialize()
     const {tooltip} = this.model

panel/tests/ui/widgets/test_icon.py

@@ -363,3 +363,16 @@ def test_button_icon_name_dynamically(page):
     button.size = "2em"
     # check size
     assert page.locator(".bk-IconLabel").bounding_box()["width"] >= 40
+
+
+def test_button_icon_description_dynamically(page):
+    button = ButtonIcon(description="Like")
+    serve_component(page, button)
+
+    assert button.description == "Like"
+    page.locator(".bk-TablerIcon").click()
+    assert page.locator(".bk-tooltip-content").text_content() == "Like"
+
+    button.description = "Dislike"
+    page.locator(".bk-TablerIcon").click()
+    assert page.locator(".bk-tooltip-content").text_content() == "Dislike"