Migrate more titles to tooltip element and remove redundant titles.

PiperOrigin-RevId: 503324949
PAIR-code · Jan 20, 2023 · 7d30408 · 7d30408
1 parent 6c25619
commit 7d30408
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 79 deletions.
diff --git a/lit_nlp/client/core/app_toolbar.css b/lit_nlp/client/core/app_toolbar.css
@@ -24,7 +24,7 @@
   align-items: center;
 }
 
-.headline-section > * {
+.headline-section > div:not(.vertical-separator), button, mwc-icon {
   padding: 4px;
   display: flex;
   justify-content: center;

diff --git a/lit_nlp/client/core/app_toolbar.ts b/lit_nlp/client/core/app_toolbar.ts
@@ -147,40 +147,49 @@ export class ToolbarComponent extends MobxLitElement {
           this.settingsService.updateSettings({'models': [...modelSet]});
           this.requestUpdate();
         };
+
+        const tooltip = `${isSelected ? 'Unselect' : 'Select'} model ${name}`;
         // clang-format off
         return html`
-          <button class=${classMap(classes)} title="${name}"
-            @click=${updateModelSelection}>
-            <span class='material-icon'>${icon}</span>
-            &nbsp;
-            <span class='headline-button-text' title=${name}>${name}</span>
-          </button>
+          <lit-tooltip content=${tooltip}>
+            <button class=${classMap(classes)}
+              slot='tooltip-anchor'
+              @click=${updateModelSelection}>
+              <span class='material-icon'>${icon}</span>
+              &nbsp;
+              <span class='headline-button-text'>${name}</span>
+            </button>
+          </lit-tooltip>
         `;
         // clang-format on
       });
       // clang-format off
       return html`
         ${modelChips}
-        <button class='headline-button' title="Select model(s)"
-          @click=${() => { this.jumpToSettingsTab("Models"); }}>
-          <span class='material-icon-outlined'>smart_toy</span>
-          &nbsp;<span class='material-icon'>arrow_drop_down</span>
-        </button>
+        <lit-tooltip content="Select model(s)">
+          <button class='headline-button' slot="tooltip-anchor"
+            @click=${() => { this.jumpToSettingsTab("Models"); }}>
+            <span class='material-icon-outlined'>smart_toy</span>
+            &nbsp;<span class='material-icon'>arrow_drop_down</span>
+          </button>
+        </lit-tooltip>
       `;
       // clang-format on
     } else {
       // Otherwise, give a regular button that opens the models menu.
       const buttonText = this.appState.currentModels.join(', ');
       // clang-format off
       return html`
-        <button class='headline-button' title="Select model(s)"
-          @click=${() => { this.jumpToSettingsTab("Models"); }}>
-          <span class='material-icon-outlined'>smart_toy</span>
-          &nbsp;
-          <span class='headline-button-text'>${buttonText}</span>
-          &nbsp;
-          <span class='material-icon'>arrow_drop_down</span>
-        </button>
+        <lit-tooltip content="Select model(s)">
+          <button class='headline-button' slot="tooltip-anchor"
+            @click=${() => { this.jumpToSettingsTab("Models"); }}>
+            <span class='material-icon-outlined'>smart_toy</span>
+            &nbsp;
+            <span class='headline-button-text'>${buttonText}</span>
+            &nbsp;
+            <span class='material-icon'>arrow_drop_down</span>
+          </button>
+        </lit-tooltip>
       `;
       // clang-format on
     }
@@ -191,14 +200,16 @@ export class ToolbarComponent extends MobxLitElement {
     // clang-format off
     return html`
       <div class='vertical-separator'></div>
-      <button class='headline-button' title="Select dataset"
-        @click=${() => { this.jumpToSettingsTab("Dataset"); }}>
-        <span class='material-icon'>storage</span>
-        &nbsp;
-        <span class='headline-button-text'>${buttonText}</span>
-        &nbsp;
-        <span class='material-icon'>arrow_drop_down</span>
-      </button>
+      <lit-tooltip content="Select dataset">
+        <button class='headline-button' slot="tooltip-anchor"
+          @click=${() => { this.jumpToSettingsTab("Dataset"); }}>
+          <span class='material-icon'>storage</span>
+          &nbsp;
+          <span class='headline-button-text'>${buttonText}</span>
+          &nbsp;
+          <span class='material-icon'>arrow_drop_down</span>
+        </button>
+      </lit-tooltip>
     `;
     // clang-format on
   }
@@ -225,12 +236,14 @@ export class ToolbarComponent extends MobxLitElement {
         };
         // clang-format off
         return html`
-          <button class=${classMap(classes)} title='Select ${name} layout'
-            @click=${updateLayoutSelection}>
-            <span class=${iconClass}>view_compact</span>
-            &nbsp;
-            <span class='headline-button-text'>${name}</span>
-          </button>
+          <lit-tooltip content="Select ${name} layout">
+            <button class=${classMap(classes)} slot="tooltip-anchor"
+              @click=${updateLayoutSelection}>
+              <span class=${iconClass}>view_compact</span>
+              &nbsp;
+              <span class='headline-button-text'>${name}</span>
+            </button>
+          </lit-tooltip>
         `;
         // clang-format on
       });
@@ -241,14 +254,16 @@ export class ToolbarComponent extends MobxLitElement {
       // Otherwise, give a regular button that opens the layouts menu.
       // clang-format off
       return html`
-        <button class='headline-button' title="Select UI layout."
-          @click=${() => { this.jumpToSettingsTab("Layout"); }}>
-          <span class='material-icon'>view_compact</span>
-          &nbsp;
-          <span class='headline-button-text' title=${currentLayout}>${currentLayout}</span>
-          &nbsp;
-          <span class='material-icon'>arrow_drop_down</span>
-        </button>
+        <lit-tooltip content="Select UI layout.">
+          <button class='headline-button' slot="tooltip-anchor"
+            @click=${() => { this.jumpToSettingsTab("Layout"); }}>
+            <span class='material-icon'>view_compact</span>
+            &nbsp;
+            <span class='headline-button-text'>${currentLayout}</span>
+            &nbsp;
+            <span class='material-icon'>arrow_drop_down</span>
+          </button>
+        </lit-tooltip>
       `;
       // clang-format on
     }
@@ -272,27 +287,34 @@ export class ToolbarComponent extends MobxLitElement {
   renderRightCorner() {
     // clang-format off
     const settingsButton = html`
-      <button class='headline-button unbordered' id="config"
-        title="Configure models, dataset, and UI."
-        @click=${this.toggleGlobalSettings}>
-        <span class='material-icon'>settings</span>
-        &nbsp;Configure
-      </button>`;
+      <lit-tooltip content="Configure models, datasets, and UI.">
+        <button class='headline-button unbordered' id="config"
+          slot="tooltip-anchor"
+          @click=${this.toggleGlobalSettings}>
+          <span class='material-icon'>settings</span>
+          &nbsp;Configure
+        </button>
+      </lit-tooltip>`;
 
     const docButton = this.appState.metadata != null ?
         html`
+        <lit-tooltip content="Go to documentation" tooltipPosition="left">
           <mwc-icon class="icon-button large-icon white-icon icon-margin"
-            title="Documentation"
+            slot="tooltip-anchor"
             @click=${this.toggleDocumentation}>
             help_outline
-          </mwc-icon>` : null;
+          </mwc-icon>
+        </lit-tooltip>` : null;
+
     return html`
       ${settingsButton}
-      <button class='headline-button unbordered' title="Copy link to this page"
-        @click=${this.onClickCopyLink}>
-        <span class='material-icon'>link</span>
-        &nbsp;Copy Link
-      </button>
+      <lit-tooltip content="Copy link to this page" tooltipPosition="left">
+        <button class='headline-button unbordered' slot="tooltip-anchor"
+          @click=${this.onClickCopyLink}>
+          <span class='material-icon'>link</span>
+          &nbsp;Copy Link
+        </button>
+      </lit-tooltip>
       ${docButton}
     `;
     // clang-format on

diff --git a/lit_nlp/client/core/widget_group.css b/lit_nlp/client/core/widget_group.css
@@ -118,7 +118,7 @@ lit-widget {
   max-width: var(--lit-group-header-height);
 }
 
-:host([minimized]) .header {
+:host([minimized]) .header:not(.tooltip-text){
   padding-top: 8px;
   padding-bottom: 2px; /* top icon should align with horizontal toolbar */
   padding-left: 0;

diff --git a/lit_nlp/client/core/widget_group.ts b/lit_nlp/client/core/widget_group.ts
@@ -148,6 +148,8 @@ export class WidgetGroup extends ReactiveElement {
 
     const tooltipHtml =
         html`<lit-tooltip .content=${infoMarkdown}></lit-tooltip>`;
+    // TODO(b/255799266): Add fast tooltips to module controls without
+    // rotating on collapse.
     // clang-format off
     return html`
       <div class=header>

diff --git a/lit_nlp/client/elements/color_legend.css b/lit_nlp/client/elements/color_legend.css
@@ -19,6 +19,9 @@
   margin: 2px;
   border: 1px solid gray;
   border-radius: 1px;
+  /* This helps to offset a rendering differential between
+   * tooltip and color blocks. */
+  transform: translateY(2px);
 }
 
 .legend-label {

diff --git a/lit_nlp/client/elements/color_legend.ts b/lit_nlp/client/elements/color_legend.ts
@@ -146,7 +146,9 @@ export class ColorLegend extends ReactiveElement {
     // clang-format off
     return html`
       <div class='legend-line'>
-        <div class='legend-box' title=${val} style=${style}></div>
+        <lit-tooltip content=${val} tooltipPosition="above">
+          <div class='legend-box' slot="tooltip-anchor" style=${style}></div>
+        </lit-tooltip>
         <div class='legend-label' ?hidden=${hideLabels}>${val}</div>
       </div>
     `;
@@ -169,11 +171,12 @@ export class ColorLegend extends ReactiveElement {
     const background = this.scale(colorVal);
     const style = styleMap({'background': background});
 
-    // TODO(b/237418328): Add a custom tooltip for a faster display time.
     // clang-format off
     return html`
       <div class='legend-line'>
-        <div class='legend-box' title=${title} style=${style}></div>
+        <lit-tooltip content=${title} tooltipPosition="above">
+          <div class='legend-box' slot="tooltip-anchor" style=${style}></div>
+        </lit-tooltip>
       </div>
     `;
     // clang-format on
@@ -194,8 +197,7 @@ export class ColorLegend extends ReactiveElement {
             <mwc-icon class="icon material-icon-outlined"
               slot="tooltip-anchor">palette</mwc-icon>
           </lit-tooltip>
-          <div class="color-label" title=${this.label}
-            name="color-name">
+          <div class="color-label" name="color-name">
             ${this.label}
           </div>
 
@@ -226,8 +228,7 @@ export class ColorLegend extends ReactiveElement {
             <mwc-icon class="icon material-icon-outlined"
               slot="tooltip-anchor">palette</mwc-icon>
           </lit-tooltip>
-          <div class="color-label" title=${this.label}
-            name="color-name">
+          <div class="color-label" name="color-name">
             ${this.label}
           </div>
 

diff --git a/lit_nlp/client/elements/table.ts b/lit_nlp/client/elements/table.ts
@@ -825,10 +825,13 @@ export class DataTable extends ReactiveElement {
     const headerClasses =
         classMap({'column-header': true, 'right-align': header.rightAlign!});
 
+
+    // TODO(b/255799266): Add fast tooltips to icons.
+    // There's some rendering trickiness around the table element and tooltips.
     // clang-format off
     return html`
         <th id=${headerId}>
-          <div class=${headerClasses} title=${title}>
+          <div class=${headerClasses}>
             <div class="header-holder">
               <div @click=${toggleSort}>${header.html!}</div>
               ${this.searchEnabled ? html`

diff --git a/lit_nlp/client/modules/embeddings_module.ts b/lit_nlp/client/modules/embeddings_module.ts
@@ -590,11 +590,15 @@ export class EmbeddingsModule extends LitModule {
             label=${this.colorService.selectedColorOption.name}
             .scale=${this.colorService.selectedColorOption.scale}>
           </color-legend>
-          <button class="hairline-button selected-nearest-button"
-            ?disabled=${disabled}
-            @click=${onSelectNearest}
-            title=${disabled ? 'Select a single point to use this feature' : ''}
-          >Select ${DEFAULT_NUM_NEAREST} nearest neighbors</button>
+          <lit-tooltip content=${disabled ?
+            'Select nearest neighbors for the current datapoint. To enable, select a single datapoint.' : ''}
+            tooltipPosition="above">
+            <button class="hairline-button selected-nearest-button"
+              ?disabled=${disabled}
+              @click=${onSelectNearest}
+              slot="tooltip-anchor"
+            >Select ${DEFAULT_NUM_NEAREST} nearest neighbors</button>
+          </lit-tooltip>
         </div>
       </div>
     `;

diff --git a/lit_nlp/client/modules/tcav_module.ts b/lit_nlp/client/modules/tcav_module.ts
@@ -271,7 +271,7 @@ export class TCAVModule extends LitModule {
         this.selectedLayers.size;
 
     const disabledText =
-        `select a slice with ${MIN_EXAMPLES_LENGTH} or more examples`;
+        `Select a slice with ${MIN_EXAMPLES_LENGTH} or more examples.`;
 
     // The width of the SVG increase by 60px for each additional entry after
     // the first bar, so their labels don't overlap.
@@ -306,10 +306,12 @@ export class TCAVModule extends LitModule {
                     this.selectedLayers.size === 0 &&
                     this.selectedSlices.size === 0 &&
                     this.negativeSlices.size === 0}>Clear</button>
-                <button id='submit'
-                  class="hairline-button" title=${shouldDisable() ? disabledText: ''}
-                  @click=${() => this.runTCAV()} ?disabled=${
-                   shouldDisable()}>Run TCAV</button>
+                <lit-tooltip content=${shouldDisable() ? disabledText: ''}>
+                  <button id='submit'
+                    class="hairline-button" slot="tooltip-anchor"
+                    @click=${() => this.runTCAV()} ?disabled=${
+                     shouldDisable()}>Run TCAV</button>
+                </lit-tooltip>
               </div>
             </div>
           </div>

diff --git a/lit_nlp/client/modules/thresholder_module.ts b/lit_nlp/client/modules/thresholder_module.ts
@@ -255,14 +255,18 @@ export class ThresholderModule extends LitModule {
         "using the cost ratio and a number of different techniques";
     return html`
         ${this.facetingControl}
-        <div title=${costRatioTooltip}>Cost ratio (FP/FN):</div>
+        <lit-tooltip content=${costRatioTooltip}>
+          <div slot="tooltip-anchor">Cost ratio (FP/FN):</div>
+        </lit-tooltip>
         <input type=number class="cost-ratio-input" step="0.1" min=0 max=20
                .value=${this.costRatio.toString()}
                @input=${handleCostRatioInput}>
-        <button class='hairline-button' title=${calculateTooltip}
-           @click=${this.calculateThresholds}>
-          Get optimal thresholds
-        </button>`;
+        <lit-tooltip content=${calculateTooltip}>
+          <button class='hairline-button' slot="tooltip-anchor"
+             @click=${this.calculateThresholds}>
+            Get optimal thresholds
+          </button>
+        </lit-tooltip>`;
   }
 
   override renderImpl() {