> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# تلميح
> اعرض معلومات إضافية عند تمرير المؤشر فوق المُشغِّل أو عند التركيز عليه.
## نظرة عامة
استخدم `Tooltip` لشرح مختصر لعنصر تحكم أو لنص مقتطع. أبقِ المعلومات الأساسية مرئية، وامنح عناصر التحكم اسمًا يمكن الوصول إليه، واستخدم [نافذة منبثقة](https://docs.twenty.com/ar/ui/primitives/surfaces/popover.md) عندما يحتوي المحتوى على روابط أو أزرار أو عناصر تحكم أخرى.
**Light**
[مثال على التلميح (light)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-tooltip--display\&viewMode=story\&globals=colorScheme:light)
**Dark**
[مثال على التلميح (dark)](https://storybook.twenty.com/iframe.html?id=ui-surfaces-tooltip--display\&viewMode=story\&globals=colorScheme:dark)
[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-surfaces-tooltip--display)
## استخدام
```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { Tooltip } from 'twenty-ui/primitives/surfaces';
import { Text } from 'twenty-ui/primitives/typography';
export const ExportHelp = () => (
}>
);
```
يقبل المكوّن الملائم عنصر مشغّل واحدًا بصفته `children`. تتلقى العناصر الأصلية سمات المشغّل ومعالجات الأحداث والمرجع مباشرةً. يجب أن تمرّر مكوّنات المشغّل المخصصة جميعها. يعمل عنصر الغلاف أيضًا مع مكوّن لا يمرّر كل خاصية للمشغّل.
يفتح التمرير فوق العنصر تلميح الأدوات بعد `delay` مللي ثانية، وقيمته الافتراضية هي `600`. يفتحه التركيز عبر لوحة المفاتيح فورًا. القيمة الافتراضية لـ `closeDelay` هي `0`؛ ويبقي التمرير فوق النافذة المنبثقة مفتوحة ما لم يتم تعيين `disableHoverablePopup`. يؤدي مفتاح Escape إلى إغلاقه.
## الحالة المتحكَّم بها
استخدم `open` و`onOpenChange` معًا عندما يمتلك التطبيق التحكم في مستوى الظهور. استخدم `defaultOpen` فقط لتعيين مستوى الظهور الابتدائي لتلميح أدوات غير متحكَّم به.
```tsx theme={null}
import { useState } from 'react';
import { Button } from 'twenty-ui/primitives/input';
import { Tooltip } from 'twenty-ui/primitives/surfaces';
export const ControlledExportHelp = () => {
const [open, setOpen] = useState(false);
return (
);
};
```
## المحتوى الغني والتركيب
تقبل الصيغة المختصرة `description` و`startIcon` إلى جانب `content`. يُعرض محتوى العقدة المخصصة كما هو مقدَّم، ما لم يطلب الوصف أو الرمز تخطيط العنوان.
```tsx theme={null}
import { IconInfoCircle } from 'twenty-ui/icon';
import { Button } from 'twenty-ui/primitives/input';
import { Tooltip } from 'twenty-ui/primitives/surfaces';
export const ExportDetails = () => (
}
arrow
>
);
```
يعرض الاستخدام المركب كل جزء مثبت من Base UI والتخطيط الاختياري لـ `Tooltip.Body`. ركّب البوابة والتموضع والنافذة المنبثقة والسهم الاختياري صراحةً. يعرض Popup عناصره التابعة كما تم توفيرها؛ ويوفر Body تخطيط العنوان والوصف والأيقونة الزخرفية نفسه كما في الصيغة المختصرة.
```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { Tooltip } from 'twenty-ui/primitives/surfaces';
export const ComposedExportDetails = () => (
Export records} />
Export visible records
);
```
| الجزء | هدف العنصر الأصلي والخصائص والمرجع |
| - | - |
| `Root` | تنسيق الحالة والحمولة. لا توجد عقدة DOM أو خصائص أصلية أو مرجع DOM. يكشف `actionsRef` عن `close` و`unmount`. |
| `المزود` | `delay` و`closeDelay` و`timeout` مشتركة. لا توجد عقدة DOM أو مرجع DOM. |
| `المشغّل` | زر افتراضيًا. تستهدف الخصائص الأصلية والمعالجات و`render` والمرجع عنصر المشغّل. |
| `Portal` | عنصر div الخاص بالبوابة. القيمة الافتراضية هي حاوية النسق، ثم متن المستند. |
| `Positioner` | عنصر div الخاص بالتموضع. يتولى نقطة الإرساء والجانب المادي/المنطقي والإزاحات ومعالجة التصادم والتموضع اللاصق وحشو السهم. |
| `Popup` | عنصر div الخاص بالنافذة المنبثقة. يتولى المحتوى والخصائص الأصلية والأنماط و`render` والمرجع. |
| `Body` | عنصر div اختياري للمحتوى داخل Popup أو Viewport. تستهدف الخصائص الأصلية والأنماط و`render` والمرجع جذره. |
| `Arrow` | عنصر div الخاص بالسهم داخل Popup. |
| `Viewport` | عنصر div اختياري للانتقالات بين حمولات المشغّل. |
يقبل `Tooltip.Body` عناصر فرعية اختيارية للعنوان، وعُقدتي `description` و`startIcon`. تستخدم العناوين وزناً متوسطاً؛ وتستخدم الأوصاف لون التلميح الثانوي، وتحافظ على فواصل الأسطر وتلف النص الطويل. احذف العناصر الفرعية للعنوان للحصول على تلميح يحتوي على وصف فقط. الأيقونة زخرفية ولا تظهر إلا مع عنوان. لا يضيف Body دور Tooltip أو تنسيق Popup أو التحجيم أو التموضع. يظل محتوى Popup الاعتباطي مدعوماً. استورد `TooltipBodyProps` من `twenty-ui/primitives/surfaces` عند كتابة غلاف.
يقبل كل جزء من DOM الخصائص الأصلية والمراجع وتركيب `render` باستخدام عنصر أو دالة رد نداء. تستهدف الخصائص الأصلية ذات المستوى الأعلى للصيغة المختصرة و`render` والمرجع Popup. استخدم `triggerProps` و`positionerProps` و`portalProps` لتخصيص الأهداف الأخرى؛ إذ تتجاوز هذه القيم الافتراضية للصيغة المختصرة. توفر العناصر التابعة عنصر العرض الافتراضي للمشغّل. يحافظ الشكلان على حالة Root المتحكَّم بها/غير المتحكَّم بها وتفاصيل حدث دالة رد النداء في Base UI، بما في ذلك الإلغاء والسبب والحدث الأصلي والمشغّل النشط.
يربط `Tooltip.createHandle\()` المشغّلات المنفصلة بأي من الشكلين عبر `handle`. يمكن أن تكون العناصر التابعة لـ Root المركب أو `content` الخاص بالصيغة المختصرة دالة تستقبل الحمولة النشطة ذات النوع المحدد. يكشف `Tooltip.Handle` والنوع العام `TooltipHandle` عن عقد المقبض المثبّت. تدعم المقابض `open(triggerId)` و`close()` الإلزاميين أثناء تثبيت Root الخاص بها.
## الترحيل
استبدل `content={title}` بـ `content={title} description={description} startIcon={icon}`. في الاستخدام المركب، استخدم `Tooltip.Body` لتخطيط العنوان والوصف المشترك، أو أنشئ محتواك الخاص. تمت إزالة `Tooltip.Content` و`TooltipContentProps`.
تُنقل خصائص تموضع Popup المركب الحالية إلى Positioner. ضعه داخل Portal، وانقل `container` و`keepMounted` إلى Portal، وأبقِ `maxWidth` على Popup، واستبدل `arrow` بعنصر Arrow فرعي. حافظ على التباعد السابق صراحةً باستخدام `sideOffset={10}` عند الحاجة. يحتفظ Positioner المركب بقيمة Base UI وهي `sideOffset={0}`. يحد كلا الشكلين Popup عند 300 بكسل افتراضيًا.
## عناصر التحكم المعطلة
لا يمكن للأزرار الأصلية المعطلة تلقي التركيز عبر لوحة المفاتيح. غلّف أحدها بمشغّل قابل للتركيز حتى يتمكن المستخدمون من معرفة سبب عدم توفر الإجراء.
```tsx theme={null}
import { Button } from 'twenty-ui/primitives/input';
import { Tooltip } from 'twenty-ui/primitives/surfaces';
export const UnavailableExport = () => (
);
```
يؤدي تعيين `disabled` على الصيغة المختصرة أو Root إلى تعطيل تلميح الأدوات نفسه. يؤدي `disabled` الخاص بالمشغّل إلى تعطيل تفاعل تلميح الأدوات لذلك المشغّل. عطّل عنصر التحكم الأصلي من خلال خصائصه الخاصة أو عنصر العرض الخاص بـ Trigger.
## الموضع والنص المتجاوز
تكون القيم الافتراضية للاختصار هي `side="top"` و`align="center"` و`sideOffset={10}`. يبلغ الحد الأقصى لعرض كلٍّ من تلميحات الأدوات المختصرة والمركبة 300 بكسل، ويُقيَّد بالمساحة المتاحة بجانب المرساة. مرّر `maxWidth` إلى المختصر أو `Tooltip.Popup` لاختيار حد أقصى مختلف، بما في ذلك المعاينات الأعرض. تظل أنماط النوافذ المنبثقة الأصلية متاحة لتحديد حجم مخصص. يتكيف الموضع مع المساحة المتاحة. يُخفى تلميح الأدوات المفتوح عند تمرير نقطة إرسائه خارج نطاق العرض، بما في ذلك خارج حاوية تمرير. استخدم `arrow` لإضافة سهم و`container` لتجاوز وجهة البوابة الخاصة بالنسق؛ راجع [التنسيق](https://docs.twenty.com/ar/ui/theming.md).
استخدم [OverflowingTextWithTooltip](https://docs.twenty.com/ar/ui/primitives/typography/overflowing-text-with-tooltip.md) عندما ينبغي لتسمية نصية إظهار قيمتها الكاملة فقط عند اقتطاعها. تظل خصائص `text` و`tooltipContent` و`tooltipPlace` الحالية متاحة.
## الخصائص
يُنشأ المرجع من أنواع المكوّنات العامة. تُقبل أيضًا سمات النافذة المنبثقة الأصلية ومعالجات الأحداث.
**actionsRef** `RefObject\`
A ref to imperative actions.
* `unmount`: Ends the closing phase of the tooltip after an externally controlled closing animation finishes.
Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the tooltip completes closing on its own.
Whether it leaves the DOM is decided by `keepMounted` on the portal.
* `close`: Closes the tooltip imperatively when called.
**align** `"center" | "end" | "start"` (default: center)
Alignment relative to the trigger. Defaults to center.
**alignOffset** `number | OffsetFunction` (default: 0)
Offset along the alignment axis in pixels.
**anchor** `Element | VirtualElement | RefObject\ | (() =\> Element | VirtualElement | null) | null`
An explicit positioning anchor for the popup.
**arrow** `boolean`
Displays an arrow pointing to the trigger. Defaults to false.
**arrowPadding** `number` (default: 5)
Minimum distance from the arrow to the popup edges.
**children** `ReactElement\\>` *required*
A single trigger element. Custom components must forward their ref, native attributes, and event handlers.
**className** `string | ((state: TooltipPopupState) =\> string | undefined)`
Additional CSS class for the popup.
**closeDelay** `number` (default: 0)
Delay in milliseconds before closing after hover ends. Defaults to 0.
**closeOnClick** `boolean` (default: true)
Whether the tooltip should close when this trigger is clicked.
**collisionAvoidance** `CollisionAvoidance`
Determines how to handle collisions when positioning the popup.
`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
* `'flip'`: keep the requested side when it fits; otherwise try the opposite side
(`top` and `bottom`, or `left` and `right`).
* `'shift'`: never change side; keep the requested side and move the popup within
the clipping boundary so it stays visible.
* `'none'`: do not correct side-axis overflow.
`align` controls overflow on the alignment axis (`start`/`center`/`end`):
* `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
* `'shift'`: keep side and requested alignment, then nudge the popup along the
alignment axis to fit.
* `'none'`: do not correct alignment-axis overflow.
`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
preferred axis cannot fit:
* `'start'`: allow perpendicular fallback and try the logical start side first
(`top` before `bottom`, or `left` before `right` in LTR).
* `'end'`: allow perpendicular fallback and try the logical end side first
(`bottom` before `top`, or `right` before `left` in LTR).
* `'none'`: do not fallback to the perpendicular axis.
When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
If `align` is omitted, it defaults to `'flip'`.
**collisionBoundary** `Boundary` (default: clipping-ancestors)
An element or a rectangle that delimits the area that the popup is confined to.
**collisionPadding** `Padding` (default: 5)
Additional space to maintain from the edge of the collision boundary.
**container** `HTMLElement | ShadowRoot | RefObject\ | null`
Portal destination. Defaults to the current theme container.
**content** `ReactNode | PayloadChildRenderFunction\` *required*
Supplementary content, or a function receiving the active trigger payload. Strings and numbers use the shorthand title layout.
**defaultOpen** `boolean` (default: false)
Initial visibility when the tooltip manages its own state.
**defaultTriggerId** `string | null`
ID of the trigger that the tooltip is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip.
**delay** `number` (default: 600)
Delay in milliseconds before opening on hover. Defaults to 600.
**description** `ReactNode`
Optional secondary text below the shorthand title.
**disableAnchorTracking** `boolean` (default: false)
Whether to disable the popup from tracking any layout shift of its positioning anchor.
**disabled** `boolean` (default: false)
Prevents the tooltip from opening.
**disableHoverablePopup** `boolean` (default: false)
Prevents hovering over the popup from keeping it open.
**handle** `TooltipHandle\`
Connects detached triggers and preserves their typed payloads.
**keepMounted** `boolean`
Keeps the popup mounted while closed.
**maxWidth** `MaxWidth\`
Maximum popup width. Defaults to 300 pixels and is capped by the space available beside the anchor.
**onOpenChange** `((open: boolean, eventDetails: TooltipRootChangeEventDetails) =\> void)`
Receives the requested open state and unchanged Base UI event details, including reason, event, trigger and cancel().
**onOpenChangeComplete** `((open: boolean) =\> void)`
Event handler called after any animations complete when the tooltip is opened or closed.
**open** `boolean`
Controlled visibility of the tooltip.
**portalProps** `TooltipPortalProps`
Full Portal props, including native props, ref and render. Overrides shorthand portal defaults.
**positionerProps** `TooltipPositionerProps`
Full Positioner props, including native props, ref and render. Overrides shorthand placement defaults.
**positionMethod** `"absolute" | "fixed"` (default: absolute)
CSS positioning method for the popup.
**ref** `Ref\`
Ref forwarded to the popup element.
**render** `ReactElement\\> | ComponentRenderFn\`
Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a `ReactElement` or a function that returns the element to render.
**side** `"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"` (default: top)
Preferred side of the trigger. Defaults to top and may change to avoid collisions.
**sideOffset** `number | OffsetFunction` (default: 10)
Distance from the trigger in pixels. Defaults to 10.
**startIcon** `ReactNode`
Optional node before the shorthand title.
**sticky** `boolean` (default: false)
Whether to maintain the popup in the viewport after
the anchor element was scrolled out of view.
**style** `CSSProperties | ((state: TooltipPopupState) =\> CSSProperties | undefined)`
Inline styles for the popup.
**trackCursorAxis** `"both" | "none" | "x" | "y"` (default: none)
Determines which axis the tooltip should track the cursor on.
**triggerId** `string | null`
ID of the trigger that the tooltip is associated with.
This is useful in conjunction with the `open` prop to create a controlled tooltip.
There's no need to specify this prop when the tooltip is uncontrolled (that is, when the `open` prop is not set).
**triggerProps** `TooltipTriggerProps\`
Full Trigger props, including native props, ref, render and payload. Overrides the shorthand trigger defaults.
**withExitAnimation** `boolean`
Fades and slides the popup out when it closes instead of hiding it at once.
### Tooltip.Root
**Root.actionsRef** `RefObject\`
A ref to imperative actions.
* `unmount`: Ends the closing phase of the tooltip after an externally controlled closing animation finishes.
Call `preventUnmountOnClose()` in `onOpenChange` first, otherwise the tooltip completes closing on its own.
Whether it leaves the DOM is decided by `keepMounted` on the portal.
* `close`: Closes the tooltip imperatively when called.
**Root.children** `ReactNode | PayloadChildRenderFunction\`
Parts or a render function receiving the active trigger payload. Root renders no DOM node.
**Root.defaultOpen** `boolean` (default: false)
Whether the tooltip is initially open.
To render a controlled tooltip, use the `open` prop instead.
**Root.defaultTriggerId** `string | null`
ID of the trigger that the tooltip is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip.
**Root.disabled** `boolean` (default: false)
Whether the tooltip is disabled.
**Root.disableHoverablePopup** `boolean` (default: false)
Whether the tooltip contents can be hovered without closing the tooltip.
**Root.handle** `TooltipHandle\`
Connects detached triggers and imperative open/close actions.
**Root.onOpenChange** `((open: boolean, eventDetails: TooltipRootChangeEventDetails) =\> void)`
Receives the requested open state and unchanged Base UI event details, including reason, event, trigger and cancel().
**Root.onOpenChangeComplete** `((open: boolean) =\> void)`
Event handler called after any animations complete when the tooltip is opened or closed.
**Root.open** `boolean`
Whether the tooltip is currently open.
**Root.trackCursorAxis** `"both" | "none" | "x" | "y"` (default: none)
Determines which axis the tooltip should track the cursor on.
**Root.triggerId** `string | null`
ID of the trigger that the tooltip is associated with.
This is useful in conjunction with the `open` prop to create a controlled tooltip.
There's no need to specify this prop when the tooltip is uncontrolled (that is, when the `open` prop is not set).
### Tooltip.Trigger
**Trigger.className** `string | ((state: TooltipTriggerState) =\> string | undefined)`
CSS class applied to the element, or a function that
returns a class based on the component's state.
**Trigger.closeDelay** `number` (default: 0)
How long to wait before closing the tooltip. Specified in milliseconds.
**Trigger.closeOnClick** `boolean` (default: true)
Whether the tooltip should close when this trigger is clicked.
**Trigger.delay** `number` (default: 600)
How long to wait before opening the tooltip on hover. Specified in milliseconds.
**Trigger.disabled** `boolean` (default: false)
Disables tooltip interaction for this trigger without disabling its native element.
**Trigger.handle** `TooltipHandle\`
A handle to associate the trigger with a tooltip.
**Trigger.payload** `Payload`
A payload to pass to the tooltip when it is opened.
**Trigger.ref** `((((instance: HTMLButtonElement | null) =\> void | (() =\> VoidOrUndefinedOnly)) | RefObject\) & (((instance: HTMLElement | null) =\> void | (() =\> VoidOrUndefinedOnly)) | RefObject\<...\>)) | null`
Ref to the rendered trigger element, a button by default.
**Trigger.render** `ReactElement\\> | ComponentRenderFn\`
Composes a native element or a component that forwards attributes, handlers and ref.
**Trigger.style** `CSSProperties | ((state: TooltipTriggerState) =\> CSSProperties | undefined)`
Style applied to the element, or a function that
returns a style object based on the component's state.
### Tooltip.Portal
**Portal.className** `string | ((state: TooltipPortalState) =\> string | undefined)`
CSS class applied to the element, or a function that
returns a class based on the component's state.
**Portal.container** `HTMLElement | ShadowRoot | RefObject\ | null`
Portal destination. Defaults to the current theme container, then the document body.
**Portal.keepMounted** `boolean` (default: false)
Whether to keep the portal mounted in the DOM while the popup is hidden.
**Portal.ref** `Ref\`
Ref to the portal div.
**Portal.render** `ReactElement\\> | ComponentRenderFn\`
Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a `ReactElement` or a function that returns the element to render.
**Portal.style** `CSSProperties | ((state: TooltipPortalState) =\> CSSProperties | undefined)`
Style applied to the element, or a function that
returns a style object based on the component's state.
### Tooltip.Positioner
**Positioner.align** `"center" | "end" | "start"` (default: center)
How to align the popup relative to the specified side.
**Positioner.alignOffset** `number | OffsetFunction` (default: 0)
Additional offset along the alignment axis in pixels.
Also accepts a function that returns the offset to read the dimensions of the anchor
and positioner elements, along with its side and alignment.
The function takes a `data` object parameter with the following properties:
* `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.
* `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.
* `data.side`: which side of the anchor element the positioner is aligned against.
* `data.align`: how the positioner is aligned relative to the specified side.
**Positioner.anchor** `Element | VirtualElement | RefObject\ | (() =\> Element | VirtualElement | null) | null`
An element to position the popup against.
By default, the popup will be positioned against the trigger.
**Positioner.arrowPadding** `number` (default: 5)
Minimum distance to maintain between the arrow and the edges of the popup.
Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
**Positioner.className** `string | ((state: TooltipPositionerState) =\> string | undefined)`
CSS class applied to the element, or a function that
returns a class based on the component's state.
**Positioner.collisionAvoidance** `CollisionAvoidance`
Determines how to handle collisions when positioning the popup.
`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
* `'flip'`: keep the requested side when it fits; otherwise try the opposite side
(`top` and `bottom`, or `left` and `right`).
* `'shift'`: never change side; keep the requested side and move the popup within
the clipping boundary so it stays visible.
* `'none'`: do not correct side-axis overflow.
`align` controls overflow on the alignment axis (`start`/`center`/`end`):
* `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
* `'shift'`: keep side and requested alignment, then nudge the popup along the
alignment axis to fit.
* `'none'`: do not correct alignment-axis overflow.
`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
preferred axis cannot fit:
* `'start'`: allow perpendicular fallback and try the logical start side first
(`top` before `bottom`, or `left` before `right` in LTR).
* `'end'`: allow perpendicular fallback and try the logical end side first
(`bottom` before `top`, or `right` before `left` in LTR).
* `'none'`: do not fallback to the perpendicular axis.
When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
If `align` is omitted, it defaults to `'flip'`.
**Positioner.collisionBoundary** `Boundary` (default: clipping-ancestors)
An element or a rectangle that delimits the area that the popup is confined to.
**Positioner.collisionPadding** `Padding` (default: 5)
Additional space to maintain from the edge of the collision boundary.
**Positioner.disableAnchorTracking** `boolean` (default: false)
Whether to disable the popup from tracking any layout shift of its positioning anchor.
**Positioner.positionMethod** `"absolute" | "fixed"` (default: absolute)
Determines which CSS `position` property to use.
**Positioner.ref** `Ref\`
Ref to the positioning div. Native props, styles and render target this element.
**Positioner.render** `ReactElement\\> | ComponentRenderFn\`
Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a `ReactElement` or a function that returns the element to render.
**Positioner.side** `"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"` (default: top)
Preferred physical or logical side of the anchor. Defaults to top.
**Positioner.sideOffset** `number | OffsetFunction` (default: 0)
Distance from the anchor. Defaults to 0 in compound usage. Accepts a number or positioning function.
**Positioner.sticky** `boolean` (default: false)
Whether to maintain the popup in the viewport after
the anchor element was scrolled out of view.
**Positioner.style** `CSSProperties | ((state: TooltipPositionerState) =\> CSSProperties | undefined)`
Style applied to the element, or a function that
returns a style object based on the component's state.
### Tooltip.Popup
**Popup.children** `ReactNode`
Content rendered as supplied. Does not create a portal, positioner, title layout or arrow.
**Popup.className** `string | ((state: TooltipPopupState) =\> string | undefined)`
CSS class applied to the element, or a function that
returns a class based on the component's state.
**Popup.maxWidth** `MaxWidth\`
Maximum popup width. Defaults to 300 pixels and is capped by the space available beside the anchor.
**Popup.ref** `Ref\`
Ref to the popup div. Native props, styles and render target this element.
**Popup.render** `ReactElement\\> | ComponentRenderFn\`
Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a `ReactElement` or a function that returns the element to render.
**Popup.style** `CSSProperties | ((state: TooltipPopupState) =\> CSSProperties | undefined)`
Style applied to the element, or a function that
returns a style object based on the component's state.
**Popup.withExitAnimation** `boolean` (default: false)
Enables the optional Twenty exit transition.
### Tooltip.Body
**Body.children** `ReactNode`
Optional title content, displayed with medium weight. Omit it for a description-only tooltip.
**Body.description** `ReactNode`
Optional secondary content. Preserves line breaks and wraps long text.
**Body.ref** `Ref\`
Ref to the body div. Native props, styles and render target this element.
**Body.render** `ReactElement\\> | ComponentRenderFn\`
Composes the body root through an element or render callback while preserving its layout and content.
**Body.startIcon** `ReactNode`
Optional decorative node before the title. Omitted when the title is empty.
### Tooltip.Arrow
**Arrow\.className** `string | ((state: TooltipArrowState) =\> string | undefined)`
CSS class applied to the element, or a function that
returns a class based on the component's state.
**Arrow\.ref** `Ref\`
Ref to the arrow div. Compose inside Popup.
**Arrow\.render** `ReactElement\\> | ComponentRenderFn\`
Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a `ReactElement` or a function that returns the element to render.
**Arrow\.style** `CSSProperties | ((state: TooltipArrowState) =\> CSSProperties | undefined)`
Style applied to the element, or a function that
returns a style object based on the component's state.
### Tooltip.Viewport
**Viewport.children** `ReactNode`
The content to render inside the transition container.
**Viewport.className** `string | ((state: TooltipViewportState) =\> string | undefined)`
CSS class applied to the element, or a function that
returns a class based on the component's state.
**Viewport.ref** `Ref\`
Ref to the content-transition div. Useful when several triggers share changing content.
**Viewport.render** `ReactElement\\> | ComponentRenderFn\`
Allows you to replace the component's HTML element
with a different tag, or compose it with another component.
Accepts a `ReactElement` or a function that returns the element to render.
**Viewport.style** `CSSProperties | ((state: TooltipViewportState) =\> CSSProperties | undefined)`
Style applied to the element, or a function that
returns a style object based on the component's state.
### Tooltip.Provider
**Provider.children** `ReactNode`
Tooltips sharing delay, closeDelay and timeout configuration. Provider renders no DOM node.
**Provider.closeDelay** `number`
How long to wait before closing a tooltip. Specified in milliseconds.
**Provider.delay** `number`
How long to wait before opening the tooltip on hover. Specified in milliseconds.
**Provider.timeout** `number` (default: 400)
Another tooltip will open instantly if the previous tooltip
is closed within this timeout. Specified in milliseconds.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.