- Kullanım
- Özellikler
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"
/>
</>
);
};
| Özellikler | Tür | Açıklama |
|---|---|---|
| className | dize | Ek stil tanımlamaları için isteğe bağlı CSS sınıfı |
| anchorSelect | CSS seçici | Tooltip’in bağlantı elementi için seçici (tooltip’i tetikleyen öğe) |
| içerik | dize | Tooltip içinde göstermek istediğiniz içerik |
| delayHide | sayı | İmleç bağlantıdan ayrıldıktan sonra tooltip’in gizlenmesi için beklenen süre (saniye) |
| offset | sayı | Tooltip’in konumlandırılması için piksel cinsinden ofset |
| noArrow | boolean | doğru ise, tooltip’teki oku gizler |
| isOpen | boolean | doğru ise, tooltip varsayılan olarak açıktır |
| place | react-tooltip’dan PlacesType string | Tooltip’in yerleşimini belirtir. Değerler şunları içerir: alt, sol, sağ, üst, üst-başlangıç, üst-bitiş, sağ-başlangıç, sağ-bitiş, alt-başlangıç, alt-bitiş, sol-başlangıç ve sol-bitiş |
| positionStrategy | react-tooltip’dan PositionStrategy string | Tooltip’in pozisyon stratejisi. İki değeri vardır: absolute ve fixed |
Tooltip ile Taşan Metin
Taşan metinleri ele alır ve metin taştığında bir tooltip gösterir.- Kullanım
- Özellikler
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} />;
};
| Özellikler | Tür | Açıklama |
|---|---|---|
| metin | dize | Taşan metin alanında göstermek istediğiniz içerik |