feat(playground): buttons now show tooltips (ionic-team#2234)

liamdebeasi · web-flow · commit 5bde986226c5 · 2022-03-16T18:07:12.000-04:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "@ionic-internal/ionic-ds": "^7.0.0",
     "@mdx-js/react": "^1.6.22",
     "@stackblitz/sdk": "^1.6.0",
+    "@tippyjs/react": "^4.2.6",
     "clsx": "^1.1.1",
     "concurrently": "^6.2.0",
     "crowdin": "^3.5.0",
diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx
@@ -5,6 +5,8 @@ import { EditorOptions, openAngularEditor, openHtmlEditor, openReactEditor, open
 import { Mode, UsageTarget } from './playground.types';
 import useThemeContext from '@theme/hooks/useThemeContext';
 
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css';
 
 const ControlButton = ({ isSelected, handleClick, title, label }) => {
   return (
@@ -156,7 +158,8 @@ export default function Playground({
             />
           </div>
           <div className="playground__control-group playground__control-group--end">
-            <button
+            <Tippy theme="playground" arrow={false} placement="bottom" content={codeExpanded ? 'Hide source code' : 'Show full source'}>
+              <button
               className="playground__icon-button playground__icon-button--primary"
               aria-label={codeExpanded ? 'Hide source code' : 'Show full source'}
               onClick={() => setCodeExpanded(!codeExpanded)}
@@ -173,7 +176,9 @@ export default function Playground({
                 <path d="M11 9L15 5L11 1" stroke="current" strokeLinecap="round" strokeLinejoin="round" />
               </svg>
             </button>
-            <a
+            </Tippy>
+            <Tippy theme="playground" arrow={false} placement="bottom" content="Report an issue">
+              <a
               className="playground__icon-button"
               href="https://github.com/ionic-team/ionic-docs/issues/new/choose"
               aria-label="Report an issue"
@@ -187,7 +192,9 @@ export default function Playground({
                 />
               </svg>
             </a>
-            <button className="playground__icon-button playground__icon-button--primary" onClick={copySourceCode}>
+            </Tippy>
+            <Tippy theme="playground" arrow={false} placement="bottom" content="Copy source code">
+              <button className="playground__icon-button playground__icon-button--primary" onClick={copySourceCode}>
               <svg
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
@@ -203,7 +210,9 @@ export default function Playground({
                 <rect x="3" y="3" width="8" height="8" rx="1.5" stroke="current" />
               </svg>
             </button>
-            <button className="playground__icon-button playground__icon-button--primary" onClick={openEditor}>
+            </Tippy>
+            <Tippy theme="playground" arrow={false} placement="bottom" content="Open in StackBlitz">
+              <button className="playground__icon-button playground__icon-button--primary" onClick={openEditor}>
               <svg
                 aria-hidden="true"
                 width="12"
@@ -221,6 +230,7 @@ export default function Playground({
                 />
               </svg>
             </button>
+            </Tippy>
           </div>
         </div>
         <div className="playground__preview">
diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css
@@ -191,3 +191,15 @@
 .playground iframe.frame-hidden {
   display: none;
 }
+
+/* Tooltip styling */
+.tippy-box[data-theme="playground"] {
+  background-color: var(--c-carbon-90);
+  border-radius: 8px;
+  line-height: initial;
+  font-size: 12px;
+}
+
+.tippy-box[data-theme="playground"] .tippy-content {
+  padding: 6px 10px;
+}
