diff --git a/packages/arco-lib/src/components/Popover.tsx b/packages/arco-lib/src/components/Popover.tsx
index 8b294241..338dc009 100644
--- a/packages/arco-lib/src/components/Popover.tsx
+++ b/packages/arco-lib/src/components/Popover.tsx
@@ -41,7 +41,7 @@ export const Popover = implementRuntimeComponent({
       popupContent: { slotProps: Type.Object({}) },
       content: { slotProps: Type.Object({}) },
     },
-    styleSlots: ['content'],
+    styleSlots: ['content', 'popover-trigger'],
     events: [],
   },
 })(props => {
@@ -68,7 +68,7 @@ export const Popover = implementRuntimeComponent({
       {...cProps}
       content={slotsElements.popupContent ? slotsElements.popupContent({}) : null}
     >
-      <span ref={elementRef}>
+      <span className={css(customStyle?.['popover-trigger'])} ref={elementRef}>
         {slotsElements.content ? slotsElements.content({}) : <Button>Hover Me</Button>}
       </span>
     </BasePopover>
@@ -82,7 +82,7 @@ export const Popover = implementRuntimeComponent({
         setPopupVisible(visible);
       }}
     >
-      <span ref={elementRef}>
+      <span className={css(customStyle?.['popover-trigger'])} ref={elementRef}>
         {slotsElements.content ? slotsElements.content({}) : <Button>Hover Me</Button>}
       </span>
     </BasePopover>
diff --git a/packages/arco-lib/src/components/Tooltip.tsx b/packages/arco-lib/src/components/Tooltip.tsx
index fb9ed067..fd050f3c 100644
--- a/packages/arco-lib/src/components/Tooltip.tsx
+++ b/packages/arco-lib/src/components/Tooltip.tsx
@@ -39,7 +39,7 @@ export const Tooltip = implementRuntimeComponent({
     slots: {
       content: { slotProps: Type.Object({}) },
     },
-    styleSlots: ['content'],
+    styleSlots: ['content', 'tooltip-trigger'],
     events: [],
   },
 })(props => {
@@ -60,7 +60,7 @@ export const Tooltip = implementRuntimeComponent({
   }, [subscribeMethods]);
 
   return controlled ? (
-    <div>
+    <div className={css(customStyle?.['tooltip-trigger'])}>
       <BaseTooltip
         ref={elementRef}
         className={css(customStyle?.content)}
@@ -74,7 +74,7 @@ export const Tooltip = implementRuntimeComponent({
       </BaseTooltip>
     </div>
   ) : (
-    <div>
+    <div className={css(customStyle?.['tooltip-trigger'])}>
       <BaseTooltip className={css(customStyle?.content)} {...cProps}>
         <span ref={elementRef}>
           {slotsElements.content ? slotsElements.content({}) : <Button>Hover Me</Button>}
diff --git a/packages/arco-lib/src/generated/types/Popover.ts b/packages/arco-lib/src/generated/types/Popover.ts
index 3dfa385d..660880be 100644
--- a/packages/arco-lib/src/generated/types/Popover.ts
+++ b/packages/arco-lib/src/generated/types/Popover.ts
@@ -17,6 +17,7 @@ export const PopoverPropsSpec = {
   }),
   color: Type.String({
     title: 'Background',
+    description: 'Background color of the popup-layer',
     category: Category.Style,
   }),
   position: StringUnion(
diff --git a/packages/arco-lib/src/generated/types/Tooltip.ts b/packages/arco-lib/src/generated/types/Tooltip.ts
index 0d901fa7..399a8397 100644
--- a/packages/arco-lib/src/generated/types/Tooltip.ts
+++ b/packages/arco-lib/src/generated/types/Tooltip.ts
@@ -6,6 +6,7 @@ export const TooltipPropsSpec = {
   color: Type.String({
     title: 'Color',
     category: Category.Style,
+    description: 'Background color of the popup-layer',
     widget: 'core/v1/color',
   }),
   position: StringUnion(