[Card]: add tooltip position prop (#931)

* chore: add tooltip position to card * chore: add changeset file
web3ui · Dec 5, 2022 · 420680f · 420680f
1 parent ff60d20
commit 420680f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/.changeset/plenty-penguins-smash.md b/.changeset/plenty-penguins-smash.md
@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+A tooltip position to card element
diff --git a/packages/core/src/lib/Card/Card.stories.tsx b/packages/core/src/lib/Card/Card.stories.tsx
@@ -94,6 +94,7 @@ NftCollection.args = {
     children: [<div key={'0'}>{getModuleAnimation('NFT Collection')}</div>],
     title: 'NFT Collection',
     description: 'Create and publish your own NFT Collection',
+    tooltipPosition: 'right',
 };
 
 export const Disabled = Template.bind({});

diff --git a/packages/core/src/lib/Card/Card.tsx b/packages/core/src/lib/Card/Card.tsx
@@ -20,6 +20,7 @@ const Card: React.FC<CardProps> = ({
     tooltipMove,
     tooltipMoveBody,
     tooltipText,
+    tooltipPosition = 'bottom',
     style,
     ...props
 }: CardProps) => {
@@ -67,7 +68,7 @@ const Card: React.FC<CardProps> = ({
                             content={tooltipText}
                             move={tooltipMove}
                             moveBody={tooltipMoveBody}
-                            position={'bottom'}
+                            position={tooltipPosition}
                         />
                     </AbsoluteIconStyled>
                 )}

diff --git a/packages/core/src/lib/Card/types.ts b/packages/core/src/lib/Card/types.ts
@@ -1,4 +1,5 @@
 import { ReactNode, CSSProperties } from 'react';
+import { TooltipProps } from '../Tooltip';
 export interface CardProps {
     /**
      * set the ID of Card
@@ -65,6 +66,11 @@ export interface CardProps {
      * Optional custom CSS
      */
     style?: CSSProperties;
+
+    /**
+     * Add position to card tooltip
+     */
+    tooltipPosition?: TooltipProps['position'];
 }
 
 export interface AbsoluteIconStyledProps {