@designcrowd/fe-shared-lib 1.1.5 → 1.1.6-eng-2158-2

package/src/atoms/components/Tooltip/Tooltip.stories.js

@@ -1,493 +1,493 @@
-import Tooltip from './Tooltip.vue';
-
-export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-};
-
-export const DirectionsAndAlignments = () => {
-  return {
-    components: {
-      Tooltip,
-    },
-    template: `
-      <table class="tw-w-full">
-        <thead>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</th>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Directions</th>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom">
-                <template v-slot:open>I am a tooltip on the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right">
-                <template v-slot:open>I am a tooltip on the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left">
-                <template v-slot:open>I am a tooltip on the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top">
-                <template v-slot:open>I am a tooltip on the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Alignments</th>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="left">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="bottom" alignment="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="right">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="bottom" alignment="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="bottom" alignment="center">
-                <template v-slot:open>I am a tooltip on the bottom, aligned to the center!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="bottom" alignment="center"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="top">
-                <template v-slot:open>I am a tooltip on the right, aligned to the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="right" alignment="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="bottom">
-                <template v-slot:open>I am a tooltip on the right, aligned to the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="right" alignment="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip direction="right" alignment="middle">
-                <template v-slot:open>I am a tooltip on the right, aligned to the middle!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="right" alignment="middle"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="top">
-                <template v-slot:open>I am a tooltip on the left, aligned to the top!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="left" alignment="top"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="bottom">
-                <template v-slot:open>I am a tooltip on the left, aligned to the bottom!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="left" alignment="bottom"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-right tw-p-4">
-              <Tooltip direction="left" alignment="middle">
-                <template v-slot:open>I am a tooltip on the left, aligned to the middle!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="left" alignment="middle"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="left">
-                <template v-slot:open>I am a tooltip on the top, aligned to the left!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="top" alignment="left"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="right">
-                <template v-slot:open>I am a tooltip on the top, aligned to the right!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="top" alignment="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-text-center tw-p-4">
-              <Tooltip direction="top" alignment="center">
-                <template v-slot:open>I am a tooltip on the top, aligned to the center!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip direction="top" alignment="center"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    `,
-  };
-};
-
-export const Colors = () => {
-  return {
-    components: {
-      Tooltip,
-    },
-    template: `
-      <table class="tw-w-full">
-        <thead>
-          <tr>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</th>
-            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="info-500" direction="right">
-                <template v-slot:open>I am an info tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip color="info-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="secondary-500" direction="right">
-                <template v-slot:open>I am an secondary tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip color="secondary-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="success-500" direction="right">
-                <template v-slot:open>I am an success tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip color="success-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="warning-500" direction="right">
-                <template v-slot:open>I am an warning tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip color="warning-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-          <tr class="tw-bg-grayscale-200">
-            <td class="tw-p-4">
-              <Tooltip color="error-500" direction="right">
-                <template v-slot:open>I am an error tooltip!</template>
-                <template v-slot:content>
-                  I am some slot content!
-                  <br><br>
-                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
-                  <br><br>
-                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
-                </template>
-              </Tooltip>
-            </td>
-            <td class="tw-p-4">
-              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
-                &lt;Tooltip color="error-500" direction="right"/&gt;
-                  ...
-                &lt;Tooltip/&gt;
-              </code>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    `,
-  };
-};
+import Tooltip from './Tooltip.vue';
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+};
+
+export const DirectionsAndAlignments = () => {
+  return {
+    components: {
+      Tooltip,
+    },
+    template: `
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Directions</th>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="bottom">
+                <template v-slot:open>I am a tooltip on the bottom!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="bottom"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip direction="right">
+                <template v-slot:open>I am a tooltip on the right!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-right tw-p-4">
+              <Tooltip direction="left">
+                <template v-slot:open>I am a tooltip on the left!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="left"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="top">
+                <template v-slot:open>I am a tooltip on the top!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="top"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans" colspan="2">Alignments</th>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="bottom" alignment="left">
+                <template v-slot:open>I am a tooltip on the bottom, aligned to the left!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="bottom" alignment="left"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="bottom" alignment="right">
+                <template v-slot:open>I am a tooltip on the bottom, aligned to the right!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="bottom" alignment="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="bottom" alignment="center">
+                <template v-slot:open>I am a tooltip on the bottom, aligned to the center!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="bottom" alignment="center"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip direction="right" alignment="top">
+                <template v-slot:open>I am a tooltip on the right, aligned to the top!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="right" alignment="top"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip direction="right" alignment="bottom">
+                <template v-slot:open>I am a tooltip on the right, aligned to the bottom!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="right" alignment="bottom"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip direction="right" alignment="middle">
+                <template v-slot:open>I am a tooltip on the right, aligned to the middle!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="right" alignment="middle"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-right tw-p-4">
+              <Tooltip direction="left" alignment="top">
+                <template v-slot:open>I am a tooltip on the left, aligned to the top!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="left" alignment="top"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-right tw-p-4">
+              <Tooltip direction="left" alignment="bottom">
+                <template v-slot:open>I am a tooltip on the left, aligned to the bottom!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="left" alignment="bottom"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-right tw-p-4">
+              <Tooltip direction="left" alignment="middle">
+                <template v-slot:open>I am a tooltip on the left, aligned to the middle!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="left" alignment="middle"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="top" alignment="left">
+                <template v-slot:open>I am a tooltip on the top, aligned to the left!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="top" alignment="left"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="top" alignment="right">
+                <template v-slot:open>I am a tooltip on the top, aligned to the right!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="top" alignment="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-text-center tw-p-4">
+              <Tooltip direction="top" alignment="center">
+                <template v-slot:open>I am a tooltip on the top, aligned to the center!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip direction="top" alignment="center"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  };
+};
+
+export const Colors = () => {
+  return {
+    components: {
+      Tooltip,
+    },
+    template: `
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Tooltip</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip color="info-500" direction="right">
+                <template v-slot:open>I am an info tooltip!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip color="info-500" direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip color="secondary-500" direction="right">
+                <template v-slot:open>I am an secondary tooltip!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip color="secondary-500" direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip color="success-500" direction="right">
+                <template v-slot:open>I am an success tooltip!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip color="success-500" direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip color="warning-500" direction="right">
+                <template v-slot:open>I am an warning tooltip!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip color="warning-500" direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4">
+              <Tooltip color="error-500" direction="right">
+                <template v-slot:open>I am an error tooltip!</template>
+                <template v-slot:content>
+                  I am some slot content!
+                  <br><br>
+                  Fusce gravida ligula eget maximus porta. Donec dictum augue nec sapien pharetra, et consectetur diam interdum.
+                  <br><br>
+                  Cras tristique scelerisque nulla id elementum. Nam nec nisi non lorem pellentesque pulvinar.
+                </template>
+              </Tooltip>
+            </td>
+            <td class="tw-p-4">
+              <code class="tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;Tooltip color="error-500" direction="right"/&gt;
+                  ...
+                &lt;Tooltip/&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `,
+  };
+};