github-actions[bot]
68f4cf269d
Created by Github action <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22281?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. --> Co-authored-by: github-actions <github-actions@twenty.com>
95 lines
4.6 KiB
Plaintext
95 lines
4.6 KiB
Plaintext
---
|
|
title: Tooltip dell'app
|
|
icon: message
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/tips/light-bulb.png" alt="Intestazione" />
|
|
</Frame>
|
|
|
|
Un breve messaggio che visualizza informazioni aggiuntive quando un utente interagisce con un elemento.
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizzo">
|
|
|
|
```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 | Tipo | Descrizione |
|
|
| ---------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| nomeClasse | string | Classe CSS opzionale per uno stile aggiuntivo |
|
|
| anchorSelect | Selettore CSS | Selettore per l'ancora del tooltip (l'elemento che attiva il tooltip) |
|
|
| contenuto | stringa | Il contenuto che si desidera visualizzare all'interno del tooltip |
|
|
| delayHide | numero | Il ritardo in secondi prima di nascondere il tooltip dopo che il cursore lascia l'ancora |
|
|
| compensazione | numero | La compensazione in pixel per posizionare il tooltip |
|
|
| noArrow | booleano | Se `true`, nasconde la freccia sul tooltip |
|
|
| èAperto | booleano | Se `true`, il tooltip è aperto di default |
|
|
| posizione | stringa `PlacesType` di `react-tooltip` | Specifica la posizione del tooltip. I valori includono `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, e `left-end` |
|
|
| positionStrategy | stringa `PositionStrategy` di `react-tooltip` | Strategia di posizionamento per il tooltip. Ha due valori: `absolute` e `fixed` |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
## Testo traboccante con Tooltip
|
|
|
|
Gestisce il testo traboccante e visualizza un tooltip quando il testo trabocca.
|
|
|
|
<Tabs>
|
|
<Tab title="Utilizzo">
|
|
|
|
```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="Proprietà">
|
|
|
|
|
|
| Proprietà | Tipo | Descrizione |
|
|
| --------- | ------- | ----------------------------------------------------------------- |
|
|
| testo | stringa | Il contenuto che vuoi visualizzare nell'area di testo traboccante |
|
|
|
|
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|