> ## 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` для краткого пояснения элемента управления или усечённого текста. Необходимая информация должна быть видимой, элементы управления должны иметь доступное имя; используйте [Popover](https://docs.twenty.com/ru/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`. Нативные элементы получают атрибуты триггера, обработчики событий и ref напрямую. Пользовательские компоненты-триггеры должны перенаправлять их все. Элемент-обёртка также работает с компонентом, который не перенаправляет все свойства триггера. При наведении всплывающая подсказка открывается через `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 ); ``` | Часть | Нативная цель свойств и ref | | - | - | | `Root` | Координация состояния и полезной нагрузки. Нет DOM-узла, нативных свойств или DOM ref. `actionsRef` предоставляет `close` и `unmount`. | | `Провайдер` | Общие `delay`, `closeDelay` и `timeout`. Нет DOM-узла или DOM ref. | | `Триггер` | По умолчанию кнопка. Нативные свойства, обработчики, `render` и ref нацелены на элемент-триггер. | | `Portal` | Элемент div портала. По умолчанию используется контейнер темы, затем body документа. | | `Positioner` | Элемент div для позиционирования. Управляет якорем, физической/логической стороной, смещениями, обработкой коллизий, липким позиционированием и отступом для стрелки. | | `Popup` | Элемент div всплывающего окна. Управляет содержимым, нативными свойствами, стилями, `render` и ref. | | `Body` | Необязательный div body внутри Popup или Viewport. Нативные props, стили, `render` и ref относятся к его корневому элементу. | | `Arrow` | Элемент div стрелки внутри Popup. | | `Viewport` | Необязательный div для переходов между полезными нагрузками триггеров. | `Tooltip.Body` принимает необязательные дочерние элементы заголовка, а также узлы `description` и `startIcon`. Для заголовков используется средняя насыщенность; для описаний — дополнительный цвет tooltip; переносы строк сохраняются, а длинный текст переносится. Для tooltip только с описанием не добавляйте дочерние элементы заголовка. Значок является декоративным и отображается только при наличии заголовка. Body не добавляет роль tooltip, стилизацию popup, изменение размера или позиционирование. Поддерживается произвольное содержимое Popup. При типизации обёртки импортируйте `TooltipBodyProps` из `twenty-ui/primitives/surfaces`. Каждая DOM-часть принимает нативные свойства, ref и композицию `render` с элементом или обратным вызовом. Нативные свойства верхнего уровня сокращённого варианта, `render` и ref нацелены на 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/ru/ui/theming.md). Используйте [OverflowingTextWithTooltip](https://docs.twenty.com/ru/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.