github-actions[bot]
8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
89 lines
4.7 KiB
Plaintext
89 lines
4.7 KiB
Plaintext
---
|
|
title: Consell de l'aplicació
|
|
image: /images/user-guide/tips/light-bulb.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
|
</Frame>
|
|
|
|
Un missatge breu que mostra informació addicional quan un usuari interactua amb un element.
|
|
|
|
<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">
|
|
|
|
| Props | Tipus | Descripció |
|
|
| ---------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| nomDeClasse | cadena | Classe CSS opcional per a un estil addicional |
|
|
| anchorSelect | Selector CSS | Selector per a l'ancora del tooltip (l'element que activa el tooltip) |
|
|
| contingut | cadena | El contingut que vols mostrar dins del tooltip |
|
|
| delayHide | número | El retard en segons abans d'amagar el tooltip després que el cursor surti de l'ancora |
|
|
| desplaçament | número | El desplaçament en píxels per a posicionar el tooltip |
|
|
| noArrow | boolean | Si és 'cert', amaga la fletxa del tooltip |
|
|
| isOpen | boolean | Si és 'cert', el tooltip està obert per defecte |
|
|
| place | Cadena `PlacesType` de `react-tooltip` | Especifica la col·locació del tooltip. Els valors inclouen `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, i `left-end` |
|
|
| positionStrategy | Cadena `PositionStrategy` de `react-tooltip` | Estratègia de posicionament per al tooltip. Té dos valors: `absolute` i `fixed` |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Text desbordant amb Tooltip
|
|
|
|
Gestiona el text desbordant i mostra un tooltip quan el text desborda.
|
|
|
|
<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">
|
|
|
|
| Propietats | Tipus | Descripció |
|
|
| ---------- | ------ | ---------------------------------------------------------- |
|
|
| text | cadena | El contingut que vols mostrar en l'àrea de text desbordant |
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|