Fix tooltips (#1256)

* add options for tooltip directions * make sure long words break in tooltip messages
dfinity · Feb 23, 2023 · 390c179 · 390c179
1 parent 71cd7b2
commit 390c179
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/src/frontend/src/flows/addDevice/manage/pollForTentativeDevice.ts b/src/frontend/src/flows/addDevice/manage/pollForTentativeDevice.ts
@@ -26,7 +26,7 @@ const pageContent = (userNumber: bigint) => {
         Open
         <em class="c-tooltip">
           <strong class="t-strong">${LEGACY_II_URL}</strong>
-          <span class="c-tooltip__message c-card c-card--narrow">
+          <span class="c-tooltip__message c-card c-card--tight">
             Open this link on the device you want to add.
           </span>
         </em>

diff --git a/src/frontend/src/flows/manage/index.ts b/src/frontend/src/flows/manage/index.ts
@@ -203,7 +203,7 @@ const devicesSection = ({
         <div class="t-title t-title--complications">
           <h2 class="t-title">Added devices</h2>
           <span class="t-title__complication c-tooltip" tabindex="0">
-            <span class="c-tooltip__message c-card c-card--narrow">
+            <span class="c-tooltip__message c-card c-card--tight">
               You can register up to ${MAX_AUTHENTICATORS} authenticator
               devices (recovery devices excluded)</span>
               (${_authenticators.length}/${MAX_AUTHENTICATORS})
@@ -235,11 +235,11 @@ const devicesSection = ({
           <div class="c-action-list__actions">
             <button
               ?disabled=${_authenticators.length >= MAX_AUTHENTICATORS}
-              class="c-button c-button--primary c-tooltip c-tooltip--onDisabled"
+              class="c-button c-button--primary c-tooltip c-tooltip--onDisabled c-tooltip--left"
               @click="${() => onAddDevice()}"
               id="addAdditionalDevice"
             >
-              <span class="c-tooltip__message c-tooltip__message--right c-card c-card--narrow"
+              <span class="c-tooltip__message c-card c-card--tight"
                 >You can register up to ${MAX_AUTHENTICATORS} authenticator devices.
                 Remove a device before you can add a new one.</span
               >
@@ -306,9 +306,10 @@ const deviceListItem = ({ device }: { device: DedupDevice }) => {
     </div>
     ${device.warn !== undefined
       ? html`<div class="c-action-list__action">
-          <span class="c-tooltip c-icon c-icon--warning" tabindex="0"
-            >${warningIcon}<span
-              class="c-tooltip__message c-card c-card--narrow"
+          <span
+            class="c-tooltip c-tooltip--left c-icon c-icon--warning"
+            tabindex="0"
+            >${warningIcon}<span class="c-tooltip__message c-card c-card--tight"
               >${device.warn}</span
             ></span
           >

diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
@@ -575,6 +575,11 @@ a:hover,
   padding: var(--rs-card-bezel-narrow);
 }
 
+.c-card--tight {
+  padding: calc(var(--rs-card-bezel-narrow) * 0.5)
+    calc(var(--rs-card-bezel-narrow) * 0.6);
+}
+
 .c-card--background {
   padding: calc(var(--rs-card-bezel) * 0.3);
   background: rgba(255, 255, 255, 0.2);
@@ -1296,11 +1301,15 @@ a:hover,
   max-width: 20rem;
   transition: opacity 0.2s ease-in;
   background-color: var(--rc-background);
+
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  hyphens: auto;
 }
 
-.c-tooltip__message--right {
-  right: 0;
+.c-tooltip--left .c-tooltip__message {
   left: auto;
+  right: 0;
 }
 
 /* chasm: alternative to tooltips, where the card opens to reveal details */