- Использование
- Свойства
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"
/>
</>
);
};
| Свойства | Тип | Описание |
|---|---|---|
| className | строка | Необязательный CSS-класс для дополнительного стилирования |
| anchorSelect | CSS-селектор | Селектор для анкера подсказки (элемент, который активирует подсказку) |
| content | строка | Содержимое, которое вы хотите отобразить в подсказке |
| delayHide | число | Задержка в секундах перед скрытием подсказки после того, как курсор покинет анкер |
| offset | число | Смещение в пикселях для позиционирования подсказки |
| noArrow | булево | Если true, стрелка на подсказке скрыта |
| isOpen | булево | Если 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 |
Переполненный текст с подсказкой
Обрабатывает переполненный текст и отображает подсказку, когда текст переполняется.- Использование
- Свойства
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} />;
};
| Свойства | Тип | Описание |
|---|---|---|
| текст | строка | Содержимое, которое вы хотите отобразить в области переполненного текста |