Félix Malfait
4bfc0a79c7
Attempt to fix translations... --------- Co-authored-by: github-actions <github-actions@twenty.com>
89 lines
5.7 KiB
Plaintext
89 lines
5.7 KiB
Plaintext
---
|
|
title: Подсказка приложения
|
|
image: /images/user-guide/tips/light-bulb.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Краткое сообщение, которое отображает дополнительную информацию, когда пользователь взаимодействует с элементом.
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
|
|
|
export const MyComponent = () => {
|
|
return (
|
|
<>
|
|
<p id="hoverText" style={{ display: "inline-block" }}>
|
|
Customer Insights
|
|
</p>
|
|
<AppTooltip
|
|
className
|
|
anchorSelect="#hoverText"
|
|
content="Explore customer behavior and preferences"
|
|
delayHide={0}
|
|
offset={6}
|
|
noArrow={false}
|
|
isOpen={true}
|
|
place="bottom"
|
|
positionStrategy="absolute"
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Свойства | Тип | Описание |
|
|
| ---------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| className | строка | Необязательный CSS-класс для дополнительного стилирования |
|
|
| anchorSelect | CSS-селектор | Селектор для анкера подсказки (элемент, который активирует подсказку) |
|
|
| content | строка | Содержимое, которое вы хотите отобразить в подсказке |
|
|
| delayHide | число | Задержка в секундах перед скрытием подсказки после того, как курсор покинет анкер |
|
|
| offset | число | Смещение в пикселях для позиционирования подсказки |
|
|
| noArrow | boolean | Если `true`, стрелка на подсказке скрыта |
|
|
| isOpen | boolean | Если `true`, подсказка открыта по умолчанию |
|
|
| place | Строка `PlacesType` из `react-tooltip` | Определяет расположение подсказки. Значения включают: `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, `left-end` |
|
|
| positionStrategy | Строка `PositionStrategy` из `react-tooltip` | Стратегия позиционирования для подсказки. Имеет два значения: `absolute` и `fixed` |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Переполненный текст с подсказкой
|
|
|
|
Обрабатывает переполненный текст и отображает подсказку, когда текст переполняется.
|
|
|
|
<Tabs>
|
|
<Tab title="Usage">
|
|
|
|
```jsx
|
|
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
|
|
|
|
export const MyComponent = () => {
|
|
const crmTaskDescription =
|
|
'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';
|
|
|
|
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
|
|
};
|
|
```
|
|
|
|
</Tab>
|
|
|
|
<Tab title="Props">
|
|
|
|
| Свойства | Тип | Описание |
|
|
| -------- | ------ | ------------------------------------------------------------------------ |
|
|
| текст | строка | Содержимое, которое вы хотите отобразить в области переполненного текста |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|