## Feature Examples ### Structure - description:

To display a tooltip, two parts need to be defined:

  • A trigger element that calls a tooltip when hover or focus occurs (e.g., an ). The trigger element goes inside the wrapper as its child item.
  • The content, which is the text displayed inside of a tooltip.
    • - example: ```jsx Hover or focus to see tooltip ``` ### Size - description:

    Control tooltip dimensions with the size prop:

  • For dense layouts (e.g., in a composer), use small.
  • The default size used in any other case is medium.
    • - example: ```jsx Small tooltip Medium tooltip ; ``` ### Max width - description:

    Control tooltip width with maxWidth. When the maximum width is reached, text inside the tooltip will wrap onto multiple lines.

    Default maxWidth is 204 px.

    - example: ```jsx Default max width Max width = 360 px ``` ### Placement - description:

    Use the placement prop to select the position of a tooltip in relation to its trigger element:

  • top (default)
  • right
  • bottom
  • left

    • In each of these standard positions, the tooltip aligns itself to the center of the corresponding axis and appears outside the trigger element.

    - example: ```jsx Top (default) Left Right Bottom ``` ### Text alignment - description:

    The textAlign prop controls how tooltip content is aligned:

  • start (default)
  • center
    • - example: ```jsx Start (default) Center ``` ### Delay - description:

    Delay the showing or hiding of a tooltip, for a specific amount of time, by using enterDelay and exitDelay.

    Delay times are counted by milliseconds and both are 0 by default.

    - example: ```jsx Enter delay Exit delay ``` ### Interactive - description:

    Decide whether tooltip can be hovered on not by using interactive prop.

    - example: ```jsx This is an interactive tooltip. Learn more } > Interactive Non-Interactive ``` ### On disabled trigger elements - description:

    By default, disabled trigger elements (e.g.,