feat(CPopover, CTooltip): add the animation property to enable the control of the component's fade effect

Author: mrholek

packages/coreui-react/src/components/popover/CPopover.tsx

@@ -11,6 +11,12 @@ import type { Triggers } from '../../types'
 import { isRTL } from '../../utils'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
+  /**
+   * Apply a CSS fade transition to the popover.
+   *
+   * @since 4.9.0-beta.1
+   */
+  animation?: boolean
   /**
    * A string of all className you want applied to the component.
    */
@@ -67,6 +73,7 @@ const getPlacement = (placement: string, element: HTMLDivElement | null): Placem
 
 export const CPopover: FC<CPopoverProps> = ({
   children,
+  animation = true,
   className,
   content,
   offset = [0, 8],
@@ -144,8 +151,8 @@ export const CPopover: FC<CPopoverProps> = ({
                 className={classNames(
                   'popover',
                   'bs-popover-auto',
-                  'fade',
                   {
+                    fade: animation,
                     show: state === 'entered',
                   },
                   className,
@@ -167,6 +174,7 @@ export const CPopover: FC<CPopoverProps> = ({
 }
 
 CPopover.propTypes = {
+  animation: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

packages/coreui-react/src/components/tooltip/CTooltip.tsx

@@ -11,6 +11,12 @@ import type { Triggers } from '../../types'
 import { isRTL } from '../../utils'
 
 export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+  /**
+   * Apply a CSS fade transition to the tooltip.
+   *
+   * @since 4.9.0-beta.1
+   */
+  animation?: boolean
   /**
    * A string of all className you want applied to the component.
    */
@@ -63,6 +69,7 @@ const getPlacement = (placement: string, element: HTMLDivElement | null): Placem
 
 export const CTooltip: FC<CTooltipProps> = ({
   children,
+  animation = true,
   className,
   content,
   offset = [0, 6],
@@ -138,8 +145,8 @@ export const CTooltip: FC<CTooltipProps> = ({
                 className={classNames(
                   'tooltip',
                   'bs-tooltip-auto',
-                  'fade',
                   {
+                    fade: animation,
                     show: state === 'entered',
                   },
                   className,
@@ -160,6 +167,7 @@ export const CTooltip: FC<CTooltipProps> = ({
 }
 
 CTooltip.propTypes = {
+  animation: PropTypes.bool,
   children: PropTypes.node,
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   offset: PropTypes.any, // TODO: find good proptype