Class Effect

Specifies the animation effects that can be applied to the Tooltip component during show and hide transitions.

Inheritance
System.Object
Effect
Namespace: Syncfusion.Blazor.Popups
Assembly: Syncfusion.Blazor.dll
Syntax
public sealed class Effect : Enum
Remarks

The Effect enumeration provides various animation options to enhance the visual experience when displaying or hiding tooltips. Different effects can be configured for open and close actions to create custom transition behaviors. Animation effects improve user experience by providing smooth visual feedback during tooltip interactions.

Examples

The following example demonstrates how to set animation effects for a tooltip:

<SfTooltip Content="Sample Tooltip" OpenEffect="Effect.FadeIn" CloseEffect="Effect.FadeOut">
    <div>Hover over me</div>
</SfTooltip>

Fields

FadeIn

Applies a fade-in animation effect where the tooltip gradually appears with increasing opacity.

Declaration
public const Effect FadeIn
Field Value
Type
Effect
Remarks

The FadeIn effect provides a smooth transition by gradually increasing the tooltip's opacity from 0% to 100%. This is commonly used for tooltip opening animations to create a gentle appearance effect.

FadeOut

Applies a fade-out animation effect where the tooltip gradually disappears with decreasing opacity.

Declaration
public const Effect FadeOut
Field Value
Type
Effect
Remarks

The FadeOut effect provides a smooth transition by gradually decreasing the tooltip's opacity from 100% to 0%. This is commonly used for tooltip closing animations to create a gentle disappearance effect.

FadeZoomIn

Applies a combined fade and zoom-in animation effect where the tooltip appears with both opacity and scale transitions.

Declaration
public const Effect FadeZoomIn
Field Value
Type
Effect
Remarks

The FadeZoomIn effect combines fading and scaling animations, making the tooltip appear to grow from a smaller size while fading in. This creates a more dynamic and attention-grabbing entrance animation compared to simple fade effects.

FadeZoomOut

Applies a combined fade and zoom-out animation effect where the tooltip disappears with both opacity and scale transitions.

Declaration
public const Effect FadeZoomOut
Field Value
Type
Effect
Remarks

The FadeZoomOut effect combines fading and scaling animations, making the tooltip appear to shrink to a smaller size while fading out. This creates a more dynamic and visually appealing exit animation compared to simple fade effects.

FlipXDownIn

Applies a 3D flip animation effect where the tooltip rotates along the X-axis from the bottom upward during appearance.

Declaration
public const Effect FlipXDownIn
Field Value
Type
Effect
Remarks

The FlipXDownIn effect creates a 3D rotation animation where the tooltip flips from the bottom edge upward along the X-axis. This provides a sophisticated 3D visual effect that makes the tooltip appear to rotate into view from below.

FlipXDownOut

Applies a 3D flip animation effect where the tooltip rotates along the X-axis from the top downward during disappearance.

Declaration
public const Effect FlipXDownOut
Field Value
Type
Effect
Remarks

The FlipXDownOut effect creates a 3D rotation animation where the tooltip flips from the top edge downward along the X-axis. This provides a sophisticated 3D visual effect that makes the tooltip appear to rotate out of view downward.

FlipXUpIn

Applies a 3D flip animation effect where the tooltip rotates along the X-axis from the top upward during appearance.

Declaration
public const Effect FlipXUpIn
Field Value
Type
Effect
Remarks

The FlipXUpIn effect creates a 3D rotation animation where the tooltip flips from the top edge upward along the X-axis. This provides a sophisticated 3D visual effect that makes the tooltip appear to rotate into view from above.

FlipXUpOut

Applies a 3D flip animation effect where the tooltip rotates along the X-axis from the bottom upward during disappearance.

Declaration
public const Effect FlipXUpOut
Field Value
Type
Effect
Remarks

The FlipXUpOut effect creates a 3D rotation animation where the tooltip flips from the bottom edge upward along the X-axis. This provides a sophisticated 3D visual effect that makes the tooltip appear to rotate out of view upward.

FlipYLeftIn

Applies a 3D flip animation effect where the tooltip rotates along the Y-axis from the right toward the left during appearance.

Declaration
public const Effect FlipYLeftIn
Field Value
Type
Effect
Remarks

The FlipYLeftIn effect creates a 3D rotation animation where the tooltip flips from the right edge toward the left along the Y-axis. This provides a sophisticated 3D visual effect that makes the tooltip appear to rotate into view from the right side.

FlipYLeftOut

Applies a 3D flip animation effect where the tooltip rotates along the Y-axis from the left toward the right during disappearance.

Declaration
public const Effect FlipYLeftOut
Field Value
Type
Effect
Remarks

The FlipYLeftOut effect creates a 3D rotation animation where the tooltip flips from the left edge toward the right along the Y-axis. This provides a sophisticated 3D visual effect that makes the tooltip appear to rotate out of view toward the right side.

FlipYRightIn

Applies a 3D flip animation effect where the tooltip rotates along the Y-axis from the left toward the right during appearance.

Declaration
public const Effect FlipYRightIn
Field Value
Type
Effect
Remarks

The FlipYRightIn effect creates a 3D rotation animation where the tooltip flips from the left edge toward the right along the Y-axis. This provides a sophisticated 3D visual effect that makes the tooltip appear to rotate into view from the left side.

FlipYRightOut

Applies a 3D flip animation effect where the tooltip rotates along the Y-axis from the right toward the left during disappearance.

Declaration
public const Effect FlipYRightOut
Field Value
Type
Effect
Remarks

The FlipYRightOut effect creates a 3D rotation animation where the tooltip flips from the right edge toward the left along the Y-axis. This provides a sophisticated 3D visual effect that makes the tooltip appear to rotate out of view toward the left side.

None

Specifies that no animation effect should be applied to the tooltip during show or hide transitions.

Declaration
public const Effect None
Field Value
Type
Effect
Remarks

The None option disables all animation effects, causing the tooltip to appear or disappear instantly without any transition. This is useful for performance-critical scenarios or when immediate tooltip display is preferred over visual effects.

ZoomIn

Applies a zoom-in animation effect where the tooltip appears by scaling from a smaller size to its full size.

Declaration
public const Effect ZoomIn
Field Value
Type
Effect
Remarks

The ZoomIn effect creates a scaling animation where the tooltip grows from a smaller scale to its normal size during appearance. This provides a dynamic visual effect that draws attention to the tooltip as it expands into view.

ZoomOut

Applies a zoom-out animation effect where the tooltip disappears by scaling from its full size to a smaller size.

Declaration
public const Effect ZoomOut
Field Value
Type
Effect
Remarks

The ZoomOut effect creates a scaling animation where the tooltip shrinks from its normal size to a smaller scale during disappearance. This provides a dynamic visual effect that makes the tooltip appear to compress as it exits view.