
- Utilizzo
- Props
Copia
Chiedi all'IA
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
export const MyComponent = () => {
return (
<>
<p id="hoverText" style={{ display: "inline-block" }}>
Intuizioni del cliente
</p>
<AppTooltip
className
anchorSelect="#hoverText"
content="Esplora il comportamento e le preferenze dei clienti"
delayHide={0}
offset={6}
noArrow={false}
isOpen={true}
place="bottom"
positionStrategy="absolute"
/>
</>
);
};
| 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 |
Testo traboccante con Tooltip
Gestisce il testo traboccante e visualizza un tooltip quando il testo trabocca.- Utilizzo
- Proprietà
Copia
Chiedi all'IA
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
export const MyComponent = () => {
const crmTaskDescription =
'Contatta nuovamente il cliente in merito alla sua recente richiesta di informazioni sul prodotto. Discuti le opzioni di prezzo, rispondi a eventuali dubbi e fornisci ulteriori informazioni sul prodotto. Registra i dettagli della conversazione nel CRM per riferimenti futuri.';
return <OverflowingTextWithTooltip text={crmTaskDescription} />;
};
| Proprietà | Tipo | Descrizione |
|---|---|---|
| testo | stringa | Il contenuto che vuoi visualizzare nell’area di testo traboccante |