Add always-showing success tooltip

I’m trying out this UX as seen on GitHub PR pages. Easily removed if undesirable!
hashicorp · Jul 5, 2019 · 11afd99 · 11afd99
1 parent 190a20a
commit 11afd99
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/ui/app/styles/components/tooltip.scss b/ui/app/styles/components/tooltip.scss
@@ -45,12 +45,14 @@
   transition: top 0.1s ease-in-out;
 }
 
-.tooltip:hover::after {
+.tooltip:hover::after,
+.tooltip.always-active::after {
   opacity: 1;
   bottom: 120%;
 }
 
-.tooltip:hover::before {
+.tooltip:hover::before,
+.tooltip.always-active::before {
   opacity: 1;
   top: -20%;
 }
diff --git a/ui/app/templates/components/x-copy-button.hbs b/ui/app/templates/components/x-copy-button.hbs
@@ -1,6 +1,10 @@
 {{! FIXME copy-button is taken by ember-cli-clipboard, but… 🤔 }}
 {{#if (eq state 'success')}}
-  <div class='button is-borderless is-small'>{{x-icon 'copy-success'}}</div>
+  <div class='button is-borderless is-small'>
+    <span class="tooltip text-center always-active" role="tooltip" aria-label="Copied!">
+      {{x-icon 'copy-success'}}
+    </span>
+  </div>
 {{else if (eq state 'error')}}
   {{x-icon 'alert-triangle'}}
 {{else}}