docs: update tooltip className & style demo

content/show/tooltip/index-en-US.md

@@ -16,6 +16,7 @@ brief: Tooltip is used to identify an element or attach a small amount of auxili
 ```jsx import
 import { Tooltip } from '@douyinfe/semi-ui';
 ```
+
 ### Cautions
 
 In order to calculate the positioning, ToolTip needs to obtain the real DOM elements of the children, so the ToolTip type currently supports the following two types of children
@@ -113,6 +114,29 @@ function Demo() {
 }
 ```
 
+### Override Style
+
+Configure specific styles for the pop-up layer through the `className` and `style` API, such as overriding the default maxWidth (280px)
+
+```jsx live=true
+import React from 'react';
+import { Tooltip, Tag } from '@douyinfe/semi-ui';
+
+() => {
+    return (
+        <Tooltip
+            style={{
+                maxWidth: 320,
+            }}
+            className="another-classname"
+            content={'hi semi semi semi semi semi semi semi'}
+        >
+            <Tag style={{ marginRight: '8px' }}>Custom Style And ClassName</Tag>
+        </Tooltip>
+    );
+};
+```
+
 ### Position
 
 Support pop-up layers are displayed in different directions in 12 directions
@@ -353,8 +377,7 @@ function Demo() {
 
 ### Use with Popver or Popconfirm
 
-Tooltip, Popconfirm, and Popover all need to hijack related events of children (onMouseEnter / onMouseLeave / onClick ....) to configure `trigger`.
-If used directly, it will invalidate the outer trigger.  
+Tooltip, Popconfirm, and Popover all need to hijack related events of children (onMouseEnter / onMouseLeave / onClick ....) to configure `trigger`. If used directly, it will invalidate the outer trigger.  
 Need to add a layer of elements (div or span) in the middle to prevent trigger event hijack failure.
 
 ```jsx live=true hideInDSM
@@ -376,30 +399,34 @@ import { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui';
 
 ---
 
-| Properties          | Instructions                                                                                                                                                                                                                                 | Type                        | Default             | Version    |
-| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | ------------------- | ---------- |
-| autoAdjustOverflow  | Whether the floating layer automatically adjusts its direction when it is blocked                                                                                                                                                            | boolean                     | true                |            |
-| arrowPointAtCenter  | Whether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same time                                                                                                                    | boolean                     | true                | **0.34.0** |
-| content             | Pop-up layer content                                                                                                                                                                                                                         | string                      | ReactNode           |            |
-| clickToHide         | Whether to automatically close the elastic layer when clicking on the floating layer and any element inside                                                                                                                                  | boolean                     | false               | **0.24.0** |
-| getPopupContainer   | Specifies the parent DOM, and the bullet layer will be rendered to the DOM                                                                                                                                                                   | () => HTMLElement           | () => document.body |
-| mouseEnterDelay     | After the mouse is moved in, the display delay time, in milliseconds (only effective when the trigger is hover/focus)                                                                                                                        | number                      | 50                  |            |
-| mouseLeaveDelay     | The time for the delay to disappear after the mouse is moved out, in milliseconds (only effective when the trigger is hover/focus), and is not less than mouseEnterDelay                                                                     | number                      | 50                  |            |
-| motion              | Whether to show the pop-up motion                                                                                                                                                                                                            | boolean                     | true               |            |
-| position            | Pop-up layer display position, optional value: `top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight`                                                      | string                      | 'top'               |            |
-| prefixCls           | The `className` prefix of the pop-up layer wrapper div. When this item is set, the pop-up layer will no longer have the style of Tooltip.                                                                                                    | string                      | 'semi-tooltip '     |            |
-| rePosKey            | This value can be updated to manually trigger the repositioning of the pop-up layer.                                                                                                                                                         | string                      | number              |            |
-| spacing             | The distance between the pop-up layer and the `children` element                                                                                                                                                                             | number                      |                     |            |
-| showArrow           | Does it show an arrow triangle?                                                                                                                                                                                                              | boolean                     | true                |            |
-| stopPropagation     | Whether to prevent click events on the bomb layer from bubbling                                                                                                                                                                              | boolean                     | false               | **0.34.0** |
+| Properties | Instructions | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| autoAdjustOverflow | Whether the floating layer automatically adjusts its direction when it is blocked | boolean | true |  |
+| arrowPointAtCenter | Whether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same time | boolean | true | **0.34.0** |
+| className | Pop-up layer classname | string |  |  |
+| content | Pop-up layer content | string | ReactNode |  |
+| clickToHide | Whether to automatically close the elastic layer when clicking on the floating layer and any element inside | boolean | false | **0.24.0** |
+| getPopupContainer | Specifies the parent DOM, and the bullet layer will be rendered to the DOM | () => HTMLElement | () => document.body |
+| mouseEnterDelay | After the mouse is moved in, the display delay time, in milliseconds (only effective when the trigger is hover/focus) | number | 50 |  |
+| mouseLeaveDelay | The time for the delay to disappear after the mouse is moved out, in milliseconds (only effective when the trigger is hover/focus), and is not less than mouseEnterDelay | number | 50 |  |
+| motion | Whether to show the pop-up motion | boolean | true |  |
+| position | Pop-up layer display position, optional value: `top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight` | string | 'top' |  |
+| prefixCls | The `className` prefix of the pop-up layer wrapper div. When this item is set, the pop-up layer will no longer have the style of Tooltip. | string | 'semi-tooltip ' |  |
+| rePosKey | This value can be updated to manually trigger the repositioning of the pop-up layer. | string | number |  |
+| style | Pop-up layer inline style | object |  |  |
+| spacing | The distance between the pop-up layer and the `children` element | number |  |  |
+| showArrow | Does it show an arrow triangle? | boolean | true |  |
+| stopPropagation | Whether to prevent click events on the bomb layer from bubbling | boolean | false | **0.34.0** |
 | transformFromCenter | Whether to transform from the horizontal or vertical center of the element of the package, this parameter affects only the `tansform-origin 'of the dynamic effect transformation and generally does not need to be changed | boolean | true |
-| trigger             | Timing of triggering display, optional value: `hover`/`focus`/`click`/`custom`                                                                                                                                                               | string                      | 'hover'             |            |
-| visible             | Whether to show the pop-up layer                                                                                                                                                                                                             | boolean                     |                     |            |
+| trigger | Timing of triggering display, optional value: `hover`/`focus`/`click`/`custom` | string | 'hover' |  |
+| visible | Whether to show the pop-up layer | boolean |  |  |
 | wrapperClassName | When children are disabled or children are multiple elements, the outer layer will wrap a layer of span elements, and the api is used to set the style class name of this span | string |  | 1.32.0 |
-| zIndex              | Bullet levels.                                                                                                                                                                                                                               | number                      | 1060                |            |
-| onVisibleChange     | A callback triggered when the pop-up layer is displayed/hidden                                                                                                                                                                               | (isVisble: boolean) => void |                     |            |
-| onClickOutSide      | Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked (only valid when trigger is custom, click)                                                                             | (e:event) => void           |                     | **2.1.0** |
+| zIndex | Bullet levels. | number | 1060 |  |
+| onVisibleChange | A callback triggered when the pop-up layer is displayed/hidden | (isVisble: boolean) => void |  |  |
+| onClickOutSide | Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked (only valid when trigger is custom, click) | (e:event) => void |  | **2.1.0** |
+
 ## Design Tokens
+
 <DesignToken/>
 
 ## FAQ

content/show/tooltip/index.md

@@ -113,6 +113,28 @@ function Demo() {
 }
 ```
 
+### 覆盖特定样式
+
+你可以通过 className、style 为弹出层配置特定样式，例如覆盖默认的 maxWidth （280px）
+```jsx live=true
+import React from 'react';
+import { Tooltip, Tag } from '@douyinfe/semi-ui';
+
+() => {
+    return (
+        <Tooltip
+            style={{
+                maxWidth: 320
+            }}
+            className='another-classname'
+            content={'hi semi semi semi semi semi semi semi'}
+        >
+            <Tag style={{ marginRight: '8px' }}>Custom Style And ClassName</Tag>
+        </Tooltip>
+    );
+};
+```
+
 ### 位置
 
 支持弹出层在不同方向展示，共有 12 个方向
@@ -415,6 +437,7 @@ function Demo() {
 | autoAdjustOverflow | 弹出层被遮挡时是否自动调整方向 | boolean | true |  |
 | arrowPointAtCenter | “小三角”是否指向元素中心，需要同时传入"showArrow=true" | boolean | true | **0.34.0** |
 | content | 弹出层内容 | string\|ReactNode |  |  |
+| className | 弹出层的样式名 | string |  |  |
 | clickToHide | 点击弹出层及内部任一元素时是否自动关闭弹层 | boolean | false | **0.24.0** |
 | getPopupContainer | 指定父级 DOM，弹层将会渲染至该 DOM 中，自定义需要设置 `position: relative` | function():HTMLElement | () => document.body |  |
 | mouseEnterDelay | 鼠标移入后，延迟显示的时间，单位毫秒（仅当 trigger 为 hover/focus 时生效） | number | 50 |  |
@@ -423,6 +446,7 @@ function Demo() {
 | position | 弹出层展示位置，可选值：`top`, `topLeft`, `topRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom`, `bottom`, `bottomLeft`, `bottomRight` | string | 'top' |  |
 | prefixCls | 弹出层 wrapper div 的 `className` 前缀，设置该项时，弹出层将不再带 Tooltip 的样式 | string | 'semi-tooltip' |  |
 | rePosKey | 可以更新该项值手动触发弹出层的重新定位 | string\|number |  |  |
+| style    | 弹出层的内联样式 | object |  |  |
 | spacing | 弹出层与 `children` 元素的距离，单位 px | number | 8 |  |
 | showArrow | 是否显示箭头三角形 | boolean | true |  |
 | stopPropagation | 是否阻止弹层上的点击事件冒泡 | boolean | false | **0.34.0** |

packages/semi-ui/tooltip/_story/tooltip.stories.js

@@ -652,7 +652,7 @@ export const ShowArrow = () => {
     return (
       <div>
         <h4>should show content and arrow when click</h4>
-        <Tooltip showArrow trigger="click" content={'hi bytedance'}>
+        <Tooltip style={{ maxWidth: 320 }} showArrow trigger='custom' visible content={'hi semi semi semi semi semi semi semi'} position='right'>
           <Test />
         </Tooltip>
       </div>