feat(tooltip): add availableHeight and preventOverflow props

Properties availableHeight and preventOverflow are proxied to a popover component to adjust its height and position to screen boundaries in case a tooltip has a too large content fix #758
core-ds · Nov 29, 2021 · b401524 · b401524
1 parent 43b4ebd
commit b401524
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git a/packages/tooltip/src/Component.tsx b/packages/tooltip/src/Component.tsx
@@ -129,6 +129,16 @@ export type TooltipProps = {
      * Если не передавать, то тултип открывается в противоположном направлении от переданного position.
      */
     fallbackPlacements?: PopoverProps['fallbackPlacements'];
+
+    /**
+     * Запрещает тултипу менять свою позицию, если он не влезает в видимую область.
+     */
+    preventOverflow?: PopoverProps['preventOverflow'];
+
+    /**
+     *  Позволяет тултипу подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
+     */
+    availableHeight?: PopoverProps['availableHeight'];
 };
 
 export const Tooltip: FC<TooltipProps> = ({
@@ -153,6 +163,8 @@ export const Tooltip: FC<TooltipProps> = ({
     view = 'tooltip',
     targetRef = null,
     fallbackPlacements,
+    preventOverflow = true,
+    availableHeight = false,
 }) => {
     const [visible, setVisible] = useState(!!forcedOpen);
     const [target, setTarget] = useState<HTMLElement | null>(null);
@@ -323,6 +335,8 @@ export const Tooltip: FC<TooltipProps> = ({
                 update={updatePopover}
                 zIndex={zIndex}
                 fallbackPlacements={fallbackPlacements}
+                preventOverflow={preventOverflow}
+                availableHeight={availableHeight}
             >
                 <div {...getContentProps()}>{content}</div>
             </Popover>

diff --git a/packages/tooltip/src/docs/description.mdx b/packages/tooltip/src/docs/description.mdx
@@ -63,6 +63,37 @@ import { InformationCircleMIcon } from '@alfalab/icons-glyph/InformationCircleMI
 </div>
 ```
 
+В случае если тултип не помещается в видимой области экрана, можно передать параметр availableHeight, чтобы компонент подстроил свою высоту под край экрана
+Для position left и right необходимо дополнительно передать параметр preventOverflow = false.
+
+```tsx live
+<div
+    style={{
+        width: '100%',
+        height: '300px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    }}
+>
+    <Tooltip
+        position='left'
+        trigger='click'
+        preventOverflow={ false }
+        availableHeight={ true }
+        content={
+            <div style={{ width: '215px', lineHeight: '1000px' }}>
+                Теперь вам можно снимать наличные в кассе и банкоматах, если ваш тариф это позволяет
+            </div>
+        }
+    >
+        <div style={{ padding: '15px', border: '1px dashed rgba(0, 0, 0, 0.1)' }}>
+            Нажми на меня
+        </div>
+    </Tooltip>
+</div>
+```
+
 ### Также возможен вид `Hint`.
 
 ```tsx live