---
title: Tooltip aplikace
icon: zpráva
---

<Frame>
  <img src="/images/user-guide/tips/light-bulb.png" alt="Hlavička" />
</Frame>

Krátká zpráva, která zobrazí další informace, když uživatel interaguje s prvkem.

<Tabs>
<Tab title="Použití">

```jsx
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";

export const MyComponent = () => {
  return (
    <>
      <p id="hoverText" style={{ display: "inline-block" }}>
        Zákaznické přehledy
      </p>
      <AppTooltip
        className
        anchorSelect="#hoverText"
        content="Prozkoumejte chování a preference zákazníků"
        delayHide={0}
        offset={6}
        noArrow={false}
        isOpen={true}
        place="bottom"
        positionStrategy="absolute"
      />
    </>
  );
};
```

</Tab>

<Tab title="Vlastnosti">


| Vlastnosti       | Typ                                           | Popis                                                                                                                                                                                      |
| ---------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| className        | řetězec                                       | Volitelná CSS třída pro dodatečné stylování.                                                                                                                                               |
| anchorSelect     | CSS selektor                                  | Selektor pro kotvu tooltipu (prvek, který spouští tooltip).                                                                                                                                |
| obsah            | textový řetězec                               | Obsah, který chcete zobrazit v rámci tooltipu.                                                                                                                                             |
| delayHide        | číslo                                         | Zpoždění v sekundách před skrytím tooltipu poté, co kurzor opustí kotvu.                                                                                                                   |
| odsazení         | číslo                                         | Odsazení v pixelech pro umístění tooltipu.                                                                                                                                                 |
| noArrow          | booleovská hodnota                            | Pokud je `true`, skrývá šipku na tooltipu.                                                                                                                                                 |
| isOpen           | booleovská hodnota                            | Pokud je `true`, tooltip je výchozím způsobem otevřen.                                                                                                                                     |
| umístění         | řetězec `PlacesType` z `react-tooltipu`       | Určuje umístění tooltipu. Hodnoty zahrnují `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, a `left-end`. |
| positionStrategy | řetězec `PositionStrategy` z `react-tooltipu` | Strategie umístění pro tooltip. Má dvě hodnoty: `absolute` a `fixed`.                                                                                                                      |



</Tab>

</Tabs>

## Přetékající text s tooltipem

Řeší přetékající text a zobrazuje tooltip, když text přetéká.

<Tabs>
<Tab title="Použití">

```jsx
import { OverflowingTextWithTooltip } from 'twenty-ui/display';

export const MyComponent = () => {
  const crmTaskDescription =
    'Kontaktujte klienta ohledně jeho nedávného dotazu na produkt. Proberte cenové možnosti, vyřešte případné obavy a poskytněte další informace o produktu. Zaznamenejte podrobnosti rozhovoru do systému CRM pro budoucí potřebu.';

  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
};
```

</Tab>

<Tab title="Vlastnosti">


| Vlastnosti | Typ     | Popis                                                       |
| ---------- | ------- | ----------------------------------------------------------- |
| text       | řetězec | Obsah, který chcete zobrazit v oblasti přetékajícího textu. |



</Tab>

</Tabs>