Popover with arrow (tooltip view) (#2446)

* add tooltip view example * popover with arrow view
coingaming · Oct 23, 2023 · 538dcd2 · 538dcd2
1 parent ed1b10b
commit 538dcd2
Show file tree

Hide file tree

Showing 6 changed files with 508 additions and 43 deletions.
diff --git a/next-docs/pages/components/popover.tsx b/next-docs/pages/components/popover.tsx
@@ -6,6 +6,7 @@ import Layout from '../../components/Layout';
 import PropsTable from '../../components/PropsTable';
 import Default from '../../public/examples/popover/Default';
 import Position from '../../public/examples/popover/Position';
+import TooltipView from '../../public/examples/popover/TooltipView';
 import TriggerElements from '../../public/examples/popover/TriggerElements';
 import WithClose from '../../public/examples/popover/WithClose';
 import useComponent from '../../utils/useComponent';
@@ -66,6 +67,12 @@ const PagePopover = () => {
         code={examples ? examples.WithClose : 'Loading'}
       />
 
+      <Preview
+        title="Tooltip view example"
+        preview={<TooltipView />}
+        code={examples ? examples.TooltipView : 'Loading'}
+      />
+
       <PropsTable
         title="Popover"
         data={[

diff --git a/next-docs/public/examples/popover/TooltipView.tsx b/next-docs/public/examples/popover/TooltipView.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Popover, Chip } from '@heathmont/moon-core-tw';
+
+const Example = () => {
+  return (
+    <Popover position="top">
+      <Popover.Trigger>
+        <Chip>Trigger</Chip>
+      </Popover.Trigger>
+      <Popover.Panel className="w-auto min-w-[12rem] overflow-y-visible p-3 rounded-moon-s-xs text-moon-12 text-bulma bg-goku">
+        This is the popover with arrow (tooltip)
+        <Popover.Arrow />
+      </Popover.Panel>
+    </Popover>
+  );
+};
+
+export default Example;