Migrate titles to tooltip element and remove redundant titles.

PiperOrigin-RevId: 503153829
PAIR-code · Jan 19, 2023 · 6c25619 · 6c25619
1 parent f74798a
commit 6c25619
Show file tree

Hide file tree

Showing 16 changed files with 144 additions and 96 deletions.
diff --git a/lit_nlp/client/core/app_statusbar.ts b/lit_nlp/client/core/app_statusbar.ts
@@ -70,23 +70,32 @@ export class StatusbarComponent extends MobxLitElement {
             <div class="signature">
               <div>Made with <img src="static/favicon.png" class="emoji"> by the LIT team</div>
 
-              <a title="File a bug" class="link-icon" href=${bugLink} target="_blank">
-                <mwc-icon class="icon-button cyea-icon">
-                  bug_report
-                </mwc-icon>
-              </a>
-
-              <a title="View docs" class="link-icon" href=${docLink} target="_blank">
-                <mwc-icon class="icon-button cyea-icon">
-                  plagiarism
-                </mwc-icon>
-              </a>
-
-              <a title="Get help" class="link-icon" href=${helpLink} target="_blank">
-                <mwc-icon class="icon-button cyea-icon">
-                  feedback
-                </mwc-icon>
-              </a>
+              <lit-tooltip content="File a bug" tooltipPosition="above left">
+                <a slot="tooltip-anchor" class="link-icon" href=${bugLink}
+                  target="_blank">
+                  <mwc-icon class="icon-button cyea-icon">
+                    bug_report
+                  </mwc-icon>
+                </a>
+              </lit-tooltip>
+
+              <lit-tooltip content="View docs" tooltipPosition="above left">
+                <a slot="tooltip-anchor" class="link-icon" href=${docLink}
+                  target="_blank">
+                  <mwc-icon class="icon-button cyea-icon">
+                    plagiarism
+                  </mwc-icon>
+                </a>
+              </lit-tooltip>
+
+              <lit-tooltip content="Get help" tooltipPosition="above left">
+                <a class="link-icon" href=${helpLink} target="_blank"
+                  slot="tooltip-anchor">
+                  <mwc-icon class="icon-button cyea-icon">
+                    feedback
+                  </mwc-icon>
+                </a>
+              </lit-tooltip>
             </div>
           </div>
           <div class=${progressClass}></div>

diff --git a/lit_nlp/client/core/faceting_control.ts b/lit_nlp/client/core/faceting_control.ts
@@ -330,15 +330,18 @@ export class FacetingControl extends ReactiveElement {
       'disabled': this.disabled
     });
 
+    // TODO(b/265957070): Consider custom vertical padding for tooltips.
     // clang-format off
     return html`
       <popup-container>
         <div class="faceting-info" slot='toggle-anchor'>
-          <button class="hairline-button" title=${title}
-                  ?disabled=${this.disabled}>
-            <span class="material-icon">dashboard</span>
-            Facets
-          </button>
+          <lit-tooltip content=${title}>
+            <button class="hairline-button" slot="tooltip-anchor"
+                    ?disabled=${this.disabled}>
+              <span class="material-icon">dashboard</span>
+              Facets
+            </button>
+          </lit-tooltip>
           <div class=${activeFacetsClass}
            @click=${(e: Event) => { e.stopPropagation(); }}>
             : ${facetsList}

diff --git a/lit_nlp/client/core/faceting_control_test.ts b/lit_nlp/client/core/faceting_control_test.ts
@@ -6,6 +6,7 @@ import {LitElement} from 'lit';
 import {LitApp} from '../core/app';
 import {LitCheckbox} from '../elements/checkbox';
 import {PopupContainer} from '../elements/popup_container';
+import {LitTooltip} from '../elements/tooltip';
 import {mockMetadata} from '../lib/testing_utils';
 import {AppState, DataService, GroupService} from '../services/services';
 
@@ -58,7 +59,7 @@ describe('faceting control test', () => {
     expect(facetingInfo instanceof HTMLDivElement).toBeTrue();
     expect((facetingInfo as HTMLDivElement).className).toEqual('faceting-info');
     const [facetButton, facetList] = facetingInfo.children;
-    expect(facetButton instanceof HTMLButtonElement).toBeTrue();
+    expect(facetButton instanceof LitTooltip).toBeTrue();
     expect(facetList instanceof HTMLDivElement).toBeTrue();
     expect((facetList as HTMLDivElement).className).toEqual(' active-facets ');
     expect(configPanel instanceof HTMLDivElement).toBeTrue();

diff --git a/lit_nlp/client/core/global_settings.ts b/lit_nlp/client/core/global_settings.ts
@@ -167,13 +167,15 @@ export class GlobalSettingsComponent extends MobxLitElement {
         <div id="global-settings" class=${hiddenClassMap}>
         <div id="title-bar">
           Configure LIT
-          <a target='_blank'
-            href='https://github.com/PAIR-code/lit/wiki/ui_guide.md#global-settings'>
-          <mwc-icon class="icon-button large-icon" id="configure-lit-icon"
-            title="Go to reference">
-            open_in_new
-          </mwc-icon>
-          </a>
+
+          <lit-tooltip content="Go to reference">
+            <a slot="tooltip-anchor" target='_blank'
+              href='https://github.com/PAIR-code/lit/wiki/ui_guide.md#global-settings'>
+            <mwc-icon class="icon-button large-icon" id="configure-lit-icon">
+              open_in_new
+            </mwc-icon>
+            </a>
+          </lit-tooltip>
         </div>
         <div id="holder">
           <div id="sidebar">
@@ -682,7 +684,7 @@ export class GlobalSettingsComponent extends MobxLitElement {
         classMap({'expanded-info': true, open: expanderOpen});
     const status = renderStatus ? this.renderStatus(selected, disabled) : '';
     return html`
-      <div class=${classes} title="${name}">
+      <div class=${classes}>
         <div class='fixed-third-col'>
           ${selectorHtml}
         </div>

diff --git a/lit_nlp/client/core/main_toolbar.ts b/lit_nlp/client/core/main_toolbar.ts
@@ -460,7 +460,7 @@ export class LitMainToolbar extends MobxLitElement {
       <div id='left-container'>
         <lit-main-menu></lit-main-menu>
         ${this.renderSlices()}
-        <button class="${buttonClasses}" title=${title}
+        <button class="${buttonClasses}"
                 ?disabled=${pinDisabled} @click=${updatePinnedDatapoint}>
           <div class="pin-button-content">
             <span class="${pinClasses}">push_pin</span>

diff --git a/lit_nlp/client/core/modules.ts b/lit_nlp/client/core/modules.ts
@@ -334,21 +334,27 @@ export class LitModules extends ReactiveElement {
               </div>
             </div>
             <div class="preset-buttons">
-              <mwc-icon class="icon-button" title="Maximize lower area"
-                        ?disabled=${lower === this.mainSectionHeight}
-                        @click=${() => {this.setMainSectionHeight('lower');}}>
-                vertical_align_top
-              </mwc-icon>
-              <mwc-icon class="icon-button" title="Split screen"
-                        ?disabled=${split === this.mainSectionHeight}
-                        @click=${() => {this.setMainSectionHeight('split');}}>
-                vertical_align_center
-              </mwc-icon>
-              <mwc-icon class="icon-button" title="Maximize upper area"
-                        ?disabled=${upper === this.mainSectionHeight}
-                        @click=${() => {this.setMainSectionHeight('upper');}}>
-                vertical_align_bottom
-              </mwc-icon>
+              <lit-tooltip content="Maximize lower area" tooltipPosition="left">
+                <mwc-icon class="icon-button" slot="tooltip-anchor"
+                          ?disabled=${lower === this.mainSectionHeight}
+                          @click=${() => {this.setMainSectionHeight('lower');}}>
+                  vertical_align_top
+                </mwc-icon>
+              </lit-tooltip>
+              <lit-tooltip content="Split screen" tooltipPosition="left">
+                <mwc-icon class="icon-button" slot="tooltip-anchor"
+                          ?disabled=${split === this.mainSectionHeight}
+                          @click=${() => {this.setMainSectionHeight('split');}}>
+                  vertical_align_center
+                </mwc-icon>
+              </lit-tooltip>
+              <lit-tooltip content="Maximize upper area" tooltipPosition="left">
+                <mwc-icon class="icon-button" slot="tooltip-anchor"
+                          ?disabled=${upper === this.mainSectionHeight}
+                          @click=${() => {this.setMainSectionHeight('upper');}}>
+                  vertical_align_bottom
+                </mwc-icon>
+              </lit-tooltip>
             </div>
           </div>
           <div id='lower-group-area'>

diff --git a/lit_nlp/client/core/slice_module.ts b/lit_nlp/client/core/slice_module.ts
@@ -223,6 +223,7 @@ export class SliceModule extends LitModule {
       this.sliceService.removeIdsFromSlice(sliceName, ids);
     };
 
+    // TODO(b/265952155): Consider whether we want tooltips on disabled icons.
     // clang-format off
     return html`
       <div class=${itemClass}>
@@ -232,20 +233,25 @@ export class SliceModule extends LitModule {
             ${numDatapoints} ${numDatapoints === 1 ? 'datapoint' : 'datapoints'}
           </span>
 
-          <mwc-icon class=${appendIconClass} @click=${appendClicked}
-           title="Add selected to this slice">
-           add_circle_outline
-          </mwc-icon>
+          <lit-tooltip content="Add selected to slice" tooltipPosition="left">
+            <mwc-icon class=${appendIconClass} @click=${appendClicked}
+             slot="tooltip-anchor">
+             add_circle_outline
+            </mwc-icon>
+          </lit-tooltip>
 
           ${sliceName === STARRED_SLICE_NAME ?
-            html`<mwc-icon class=${clearIconClass} @click=${clearClicked}
-                  title="Reset this slice">
-                   clear
-                 </mwc-icon>` :
-            html`<mwc-icon class='icon-button selector-item-icon-button'
-                  @click=${deleteClicked} title="Delete this slice">
+            html`<lit-tooltip content="Reset this slice" tooltipPosition="left">
+                   <mwc-icon class=${clearIconClass} @click=${clearClicked}
+                     slot="tooltip-anchor">
+                     clear
+                   </mwc-icon></lit-tooltip>` :
+            html`<lit-tooltip content="Delete this slice"
+                  tooltipPosition="left">
+                  <mwc-icon class='icon-button selector-item-icon-button'
+                  @click=${deleteClicked} slot="tooltip-anchor">
                    delete_outline
-                 </mwc-icon>`}
+                 </mwc-icon></lit-tooltip>`}
           <export-controls ?disabled=${shouldDisableIcons}
               .data=${this.getArrayData(sliceName)}
               .downloadFilename="${

diff --git a/lit_nlp/client/elements/data_matrix.ts b/lit_nlp/client/elements/data_matrix.ts
@@ -251,11 +251,12 @@ export class DataMatrix extends LitElement {
 
     // clang-format off
     return html`
-      <mwc-icon class="icon-button"
-        title="Rotate column labels"
-        @click="${toggleVerticalColumnLabels}">
-        ${this.verticalColumnLabels ? 'text_rotate_up' : 'text_rotation_none'}
-      </mwc-icon>
+      <lit-tooltip content="Rotate column labels">
+        <mwc-icon class="icon-button" slot="tooltip-anchor"
+          @click="${toggleVerticalColumnLabels}">
+          ${this.verticalColumnLabels ? 'text_rotate_up' : 'text_rotation_none'}
+        </mwc-icon>
+      </lit-tooltip>
     `;
     // clang-format on
   }

diff --git a/lit_nlp/client/elements/export_controls.ts b/lit_nlp/client/elements/export_controls.ts
@@ -46,9 +46,10 @@ export class ExportControls extends ReactiveElement {
   /** A list of rows of data to download. */
   @property({type: Object}) data: SortableTableEntry[][] = [];
   /** Column names. */
-  @observable @property({type: Object}) columnNames: string[] = [];
+  @property({type: Object}) columnNames: string[] = [];
   /** Download popup position defaults to below the download icon. */
   @property({type: String}) popupPosition: string = 'below';
+  @property({type: String}) tooltipPosition: string = 'left';
   /** If true, disable controls. */
   @property({type: Boolean}) disabled = false;
 
@@ -104,21 +105,25 @@ export class ExportControls extends ReactiveElement {
       'disabled': this.disabled,
     });
 
+    // TODO(b/265978596): Consider a better place for download tooltips.
     // clang-format off
     return html`
       <div id='export-controls'>
-        <mwc-icon class=${iconClass}
-          title="Copy ${this.data.length} rows as CSV"
-          @click=${copyCSV}>
-          file_copy
-        </mwc-icon>
-
-        <popup-container class='${this.getPopupClasses()}'>
-          <mwc-icon class=${iconClass} slot='toggle-anchor'
-            title="Download ${this.data.length} rows as CSV">
-            file_download
+        <lit-tooltip content="Copy ${this.data.length} rows as CSV"
+          tooltipPosition=${this.tooltipPosition}>
+          <mwc-icon class=${iconClass} slot="tooltip-anchor"
+            @click=${copyCSV}>
+            file_copy
           </mwc-icon>
+        </lit-tooltip>
 
+        <popup-container class='${this.getPopupClasses()}'>
+          <lit-tooltip content="Download ${this.data.length} rows as CSV"
+            tooltipPosition="${this.tooltipPosition}" slot="toggle-anchor">
+            <mwc-icon class=${iconClass} slot="tooltip-anchor">
+              file_download
+            </mwc-icon>
+          </lit-tooltip>
           <div class='download-popup-controls'>
             <label for="filename">Filename</label>
             <input type="text" name="filename" value=${this.downloadFilename}

diff --git a/lit_nlp/client/elements/menu.ts b/lit_nlp/client/elements/menu.ts
@@ -177,7 +177,7 @@ export class LitMenu extends LitElement {
           <mwc-icon slot='graphic' class='check' style=${iconStyle}>
             ${hasSubmenu ? 'arrow_right' : 'check'}
           </mwc-icon>
-          <span title=${item.itemText} class=${itemTextClass}>
+          <span class=${itemTextClass}>
             ${item.itemText.slice(0, MAX_TEXT_LENGTH) +
             ((item.itemText.length > MAX_TEXT_LENGTH) ? '...': '')}
           </span>

diff --git a/lit_nlp/client/elements/score_bar.ts b/lit_nlp/client/elements/score_bar.ts
@@ -100,13 +100,16 @@ export class AnnotatedScoreBar extends LitElement {
   override render() {
     return html`<div class="annotated-cell">
       <score-bar score=${this.value} maxScore=${1}></score-bar>
-      <div class="indicator" title=${PRED_TITLE}>
-        ${this.isPredicted ? 'P' : null}
-      </div>
+      <lit-tooltip content="${PRED_TITLE}">
+        <div class="indicator" slot="tooltip-anchor">
+          ${this.isPredicted ? 'P' : null}
+        </div>
+      </lit-tooltip>
       ${this.hasTruth ?
-          html`<div class="indicator" title=${TRUTH_TITLE}>
+          html`<lit-tooltip content=${TRUTH_TITLE}>
+          <div class="indicator" slot="tooltip-anchor">
             ${this.isTruth ? 'T' : null}
-          </div>` : null}
+          </div></lit-tooltip>` : null}
     </div>`;
   }
 }

diff --git a/lit_nlp/client/elements/table.ts b/lit_nlp/client/elements/table.ts
@@ -737,7 +737,8 @@ export class DataTable extends ReactiveElement {
             ${this.exportEnabled ? html`
               <export-controls .data=${this.getArrayData()}
                   .columnNames=${this.columnStrings}
-                  .popupPosition=${'above'}></export-controls>` : null}
+                  .popupPosition=${'above'}
+                  .tooltipPosition=${'above left'}></export-controls>` : null}
           </div>
         </td>
       </tr>`;

diff --git a/lit_nlp/client/elements/tooltip.css b/lit_nlp/client/elements/tooltip.css
@@ -32,6 +32,10 @@
   bottom: 28px;
 }
 
+.left {
+  right: 12px;
+}
+
 .lit-tooltip .tooltip-text a {
   color: #7bcccc;
 }

diff --git a/lit_nlp/client/elements/tooltip.ts b/lit_nlp/client/elements/tooltip.ts
@@ -48,6 +48,7 @@ export class LitTooltip extends ReactiveElement {
 
   // Markdown that shows on hover.
   @property({type: String}) content = '';
+  // Space-separated tooltip position attributes, e.g. 'above' or 'right'.
   @property({type: String}) tooltipPosition: string = '';
   @property({type: Boolean}) shouldRenderAriaLabel = true;
 
@@ -61,7 +62,8 @@ export class LitTooltip extends ReactiveElement {
   override render() {
     const tooltipClass = classMap({
       'tooltip-text': true,
-      'above': this.tooltipPosition === 'above'
+      'above': this.tooltipPosition.indexOf('above') !== -1,
+      'left': this.tooltipPosition.indexOf('left') !== -1,
     });
 
     return html`

diff --git a/lit_nlp/client/modules/dive_module.ts b/lit_nlp/client/modules/dive_module.ts
@@ -545,18 +545,24 @@ export class DiveModule extends LitModule {
         </div>`)}
       </div>
       <div class="view-controls">
-        <span class="material-icon-outlined icon-button" title="Zoom in"
-              @click=${() =>{zoomChange(ZOOM_IN_FACTOR);}}>
-          zoom_in
-        </span>
-        <span class="material-icon-outlined icon-button" title="Zoom out"
-              @click=${() =>{zoomChange(ZOOM_OUT_FACTOR);}}>
-          zoom_out
-        </span>
-        <span class="material-icon-outlined icon-button" title="Reset view"
-              @click=${() =>{this.resetScale();}}>
-          view_in_ar
-        </span>
+        <lit-tooltip content="Zoom in" tooltipPosition="left">
+          <span class="material-icon-outlined icon-button" slot="tooltip-anchor"
+                @click=${() =>{zoomChange(ZOOM_IN_FACTOR);}}>
+            zoom_in
+          </span>
+        </lit-tooltip>
+        <lit-tooltip content="Zoom out" tooltipPosition="left">
+          <span class="material-icon-outlined icon-button" slot="tooltip-anchor"
+                @click=${() =>{zoomChange(ZOOM_OUT_FACTOR);}}>
+            zoom_out
+          </span>
+        </lit-tooltip>
+        <lit-tooltip content="Reset view" tooltipPosition="left">
+          <span class="material-icon-outlined icon-button" slot="tooltip-anchor"
+                @click=${() =>{this.resetScale();}}>
+            view_in_ar
+          </span>
+        </lit-tooltip>
       </div>
     </div>`;
     // clang-format on