Fix/unify tooltips.

Author: Alan Fleming

packages/base/src/widget.ts

@@ -1096,14 +1096,20 @@ export class DOMWidgetView extends WidgetView {
   }
 
   updateTooltip(): void {
-    const title = this.model.get('tooltip');
+    const title = this.tooltip;
     if (!title) {
       this.el.removeAttribute('title');
-    } else if (this.model.get('description').length === 0) {
+    } else if (!this.model.get('description')) {
       this.el.setAttribute('title', title);
     }
   }
 
+  get tooltip() {
+    return (
+      this.model.get('tooltip') ?? (this.model.get('description'))
+    );
+  }
+
   /**
    * Update the DOM classes applied to an element, default to this.el.
    */

packages/controls/src/widget_bool.ts

@@ -153,8 +153,7 @@ export class CheckboxView extends DescriptionView {
       this.descriptionSpan.textContent = description;
     }
     this.typeset(this.descriptionSpan);
-    this.descriptionSpan.title = description;
-    this.checkbox.title = description;
+    this.updateTooltip();
   }
 
   /**
@@ -181,13 +180,11 @@ export class CheckboxView extends DescriptionView {
   }
 
   updateTooltip(): void {
+    super.updateTooltip();
     if (!this.checkbox) return; // we might be constructing the parent
-    const title = this.model.get('tooltip');
-    if (!title) {
-      this.checkbox.removeAttribute('title');
-    } else if (this.model.get('description').length === 0) {
-      this.checkbox.setAttribute('title', title);
-    }
+    const title = this.tooltip;
+    this.checkbox.setAttribute('title', title);
+    this.descriptionSpan.setAttribute('title', title);
   }
 
   events(): { [e: string]: string } {

packages/controls/src/widget_description.ts

@@ -98,8 +98,9 @@ export class DescriptionView extends DOMWidgetView {
   }
 
   updateTooltip(): void {
+    super.updateTooltip();
     if (!this.label) return;
-    this.label.title = this.model.get('tooltip');
+    this.label.title = this.tooltip;
   }
 
   label: HTMLLabelElement;

packages/controls/src/widget_selection.ts

@@ -68,13 +68,9 @@ export class SelectionView extends DescriptionView {
   }
 
   updateTooltip(): void {
+    super.updateTooltip();
     if (!this.listbox) return; // we might be constructing the parent
-    const title = this.model.get('tooltip');
-    if (!title) {
-      this.listbox.removeAttribute('title');
-    } else if (this.model.get('description').length === 0) {
-      this.listbox.setAttribute('title', title);
-    }
+    this.listbox.setAttribute('title', this.tooltip);
   }
 
   listbox: HTMLSelectElement;

packages/controls/src/widget_string.ts

@@ -379,13 +379,9 @@ export class TextareaView extends StringView {
   }
 
   updateTooltip(): void {
+    super.updateTooltip();
     if (!this.textbox) return; // we might be constructing the parent
-    const title = this.model.get('tooltip');
-    if (!title) {
-      this.textbox.removeAttribute('title');
-    } else if (this.model.get('description').length === 0) {
-      this.textbox.setAttribute('title', title);
-    }
+    this.textbox.setAttribute('title', this.tooltip);
   }
 
   events(): { [e: string]: string } {
@@ -505,13 +501,9 @@ export class TextView extends StringView {
   }
 
   updateTooltip(): void {
+    super.updateTooltip();
     if (!this.textbox) return; // we might be constructing the parent
-    const title = this.model.get('tooltip');
-    if (!title) {
-      this.textbox.removeAttribute('title');
-    } else if (this.model.get('description').length === 0) {
-      this.textbox.setAttribute('title', title);
-    }
+    this.textbox.setAttribute('title', this.tooltip);
   }
 
   update(options?: any): void {

python/ipywidgets/ipywidgets/widgets/widget_output.py

@@ -59,6 +59,7 @@ def func():
 
     msg_id = Unicode('', help="Parent message id of messages to capture").tag(sync=True)
     outputs = TypedTuple(trait=Dict(), help="The output messages synced from the frontend.").tag(sync=True)
+    tooltip = Unicode('', allow_none=True, help="A tooltip caption.").tag(sync=True)
 
     __counter = 0