Unions

The following unions are available in the Tooltip component:

NameValueDescription
Effect
'FadeIn' | 'FadeOut' | 'FadeZoomIn' | 'FadeZoomOut' | 'FlipXDownIn' | 'FlipXDownOut' | 'FlipXUpIn' | 'FlipXUpOut' | 'FlipYLeftIn' | 'FlipYLeftOut' | 'FlipYRightIn' | 'FlipYRightOut' | 'ZoomIn' | 'ZoomOut' | 'None'

Animation effects that are applicable for Tooltip.

  • FadeIn - A fade-in animation effect where the Tooltip gradually increases in opacity from 0 to full.
  • FadeOut - A fade-out animation effect where the Tooltip gradually decreases in opacity from full to 0.
  • FadeZoomIn - A fade-in animation effect combined with a zoom-in effect.
  • FadeZoomOut - A fade-out animation effect combined with a zoom-out effect.
  • FlipXDownIn - A flip-down animation effect where the Tooltip starts upside down and flips down to become fully visible.
  • FlipXDownOut - A flip-down animation effect where the Tooltip starts fully visible and flips down to become invisible.
  • FlipXUpIn - A flip-up animation effect where the Tooltip starts upside down and flips up to become fully visible.
  • FlipXUpOut - A flip-up animation effect where the Tooltip starts fully visible and flips up to become invisible.
  • FlipYLeftIn - A flip-left animation effect where the Tooltip starts from the right side and flips left to become fully visible.
  • FlipYLeftOut - A flip-left animation effect where the Tooltip starts from the left side and flips left to become invisible.
  • FlipYRightIn - A flip-right animation effect where the Tooltip starts from the left side and flips right to become fully visible.
  • FlipYRightOut - A flip-right animation effect where the Tooltip starts from the right side and flips right to become invisible.
  • ZoomIn - A zoom-in animation effect where the Tooltip starts small and gradually grows in size to become fully visible.
  • ZoomOut - A zoom-out animation effect where the Tooltip starts full size and gradually decreases in size to become invisible.
  • None - No animation effect, the Tooltip simply appears or disappears without any animation.
Position
'TopLeft' | 'TopCenter' | 'TopRight' | 'BottomLeft' | 'BottomCenter' | 'BottomRight' | 'LeftTop' | 'LeftCenter' | 'LeftBottom' | 'RightTop' | 'RightCenter' | 'RightBottom'

Applicable positions where the Tooltip can be displayed over specific target elements.

  • TopLeft - The Tooltip is positioned at the top-left corner of the trigger element.
  • TopCenter - The Tooltip is positioned at the top-center of the trigger element.
  • TopRight - The Tooltip is positioned at the top-right corner of the trigger element.
  • BottomLeft - The Tooltip is positioned at the bottom-left corner of the trigger element.
  • BottomCenter - The Tooltip is positioned at the bottom-center of the trigger element.
  • BottomRight - The Tooltip is positioned at the bottom-right corner of the trigger element.
  • LeftTop - The Tooltip is positioned at the left-top corner of the trigger element.
  • LeftCenter - The Tooltip is positioned at the left-center of the trigger element.
  • LeftBottom - The Tooltip is positioned at the left-bottom corner of the trigger element.`
  • RightTop - The Tooltip is positioned at the right-top corner of the trigger element.
  • RightCenter - The Tooltip is positioned at the right-center of the trigger element.
  • RightBottom - The Tooltip is positioned at the right-bottom corner of the trigger element.
TipPointerPosition
'Auto' | 'Start' | 'Middle' | 'End'

Applicable tip positions attached to the Tooltip.

  • Auto - The tip pointer position is automatically calculated based on the available space.
  • Start - The tip pointer is positioned at the start of the Tooltip.
  • Middle - The tip pointer is positioned at the middle of the Tooltip.
  • End - The tip pointer is positioned at the end of the Tooltip.