Skip to content

Commit

Permalink
tooltip增加tooltipArrowClassName (#11447)
Browse files Browse the repository at this point in the history
  • Loading branch information
@z418577198
z418577198 authored Jan 4, 2025
1 parent a87143e commit 0be5988
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 23 deletions.
45 changes: 23 additions & 22 deletions docs/zh-CN/components/tooltip-wrapper.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,25 +386,26 @@ order: 59

## 属性表

| 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | ----------------------------------------------------------------------- | ------------------- | ---------------------------------------------- |
| type | `string` | `"tooltip-wrapper"` | 指定为文字提示容器组件 |
| title | `string` | `""` | 文字提示标题 |
| content | `string` | `""` | 文字提示内容, 兼容之前的 tooltip 属性 |
| placement | `"top" \| "left" \| "right" \| "bottom" ` | `"top"` | 文字提示浮层出现位置 |
| tooltipTheme | `"light" \| "dark"` | `"light"` | 主题样式， 默认为 light |
| offset | `[number, number]` | `[0, 0]` | 文字提示浮层位置相对偏移量，单位 px |
| showArrow | `boolean` | `true` | 是否展示浮层指向箭头 |
| enterable | `boolean` | `true` | 是否鼠标可以移入到浮层中 |
| disabled | `boolean` | `false` | 是否禁用浮层提示 |
| trigger | `"hover" \| "click" \| "focus" \| Array<"hover" \| "click" \| "focus">` | `"hover"` | 浮层触发方式，支持数组写法`["hover", "click"]` |
| mouseEnterDelay | `number` | `0` | 浮层延迟展示时间，单位 ms |
| mouseLeaveDelay | `number` | `300` | 浮层延迟隐藏时间，单位 ms |
| rootClose | `boolean` | `true` | 是否点击非内容区域关闭提示 |
| inline | `boolean` | `false` | 内容区是否内联显示 |
| wrapperComponent | `string` | `"div" \| "span"` | 容器标签名 |
| body | [SchemaNode](../../docs/types/schemanode) | - | 内容容器 |
| style | `Object` \| `string` | | 内容区自定义样式 |
| tooltipStyle | `Object` \| `string` | | 浮层自定义样式 |
| className | `string` | | 内容区类名 |
| tooltipClassName | `string` | | 文字提示浮层类名 |
| 属性名 | 类型 | 默认值 | 说明 |
| --------------------- | ----------------------------------------------------------------------- | ------------------- | ---------------------------------------------- |
| type | `string` | `"tooltip-wrapper"` | 指定为文字提示容器组件 |
| title | `string` | `""` | 文字提示标题 |
| content | `string` | `""` | 文字提示内容, 兼容之前的 tooltip 属性 |
| placement | `"top" \| "left" \| "right" \| "bottom" ` | `"top"` | 文字提示浮层出现位置 |
| tooltipTheme | `"light" \| "dark"` | `"light"` | 主题样式， 默认为 light |
| offset | `[number, number]` | `[0, 0]` | 文字提示浮层位置相对偏移量，单位 px |
| showArrow | `boolean` | `true` | 是否展示浮层指向箭头 |
| enterable | `boolean` | `true` | 是否鼠标可以移入到浮层中 |
| disabled | `boolean` | `false` | 是否禁用浮层提示 |
| trigger | `"hover" \| "click" \| "focus" \| Array<"hover" \| "click" \| "focus">` | `"hover"` | 浮层触发方式，支持数组写法`["hover", "click"]` |
| mouseEnterDelay | `number` | `0` | 浮层延迟展示时间，单位 ms |
| mouseLeaveDelay | `number` | `300` | 浮层延迟隐藏时间，单位 ms |
| rootClose | `boolean` | `true` | 是否点击非内容区域关闭提示 |
| inline | `boolean` | `false` | 内容区是否内联显示 |
| wrapperComponent | `string` | `"div" \| "span"` | 容器标签名 |
| body | [SchemaNode](../../docs/types/schemanode) | - | 内容容器 |
| style | `Object` \| `string` | | 内容区自定义样式 |
| tooltipStyle | `Object` \| `string` | | 浮层自定义样式 |
| className | `string` | | 内容区类名 |
| tooltipClassName | `string` | | 文字提示浮层类名 |
| tooltipArrowClassName | `string` | | 箭头类名 |
7 changes: 6 additions & 1 deletion packages/amis-ui/src/components/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ interface TooltipProps extends React.HTMLProps<HTMLDivElement> {
placement?: string;
showArrow?: boolean;
tooltipTheme?: string;
arrowClassName?: string;
bodyClassName?: string;
[propName: string]: any;
}
Expand Down Expand Up @@ -48,6 +49,7 @@ export class Tooltip extends React.Component<TooltipProps> {
showArrow,
onMouseEnter,
onMouseLeave,
arrowClassName,
bodyClassName,
componentId,
...rest
Expand All @@ -68,7 +70,10 @@ export class Tooltip extends React.Component<TooltipProps> {
role="tooltip"
>
{showArrow ? (
<div className={cx(`Tooltip-arrow`)} {...arrowProps} />
<div
className={cx(arrowClassName, 'Tooltip-arrow')}
{...arrowProps}
/>
) : null}
{title ? <div className={cx('Tooltip-title')}>{title}</div> : null}
<div className={cx(bodyClassName, 'Tooltip-body')}>{children}</div>
Expand Down
7 changes: 7 additions & 0 deletions packages/amis-ui/src/components/TooltipWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,11 @@ export interface TooltipObject {
*/
tooltipClassName?: string;

/**
* 箭头CSS类名
*/
tooltipArrowClassName?: string;

/**
* 文字提示浮层Body的CSS类名
*/
Expand Down Expand Up @@ -305,6 +310,7 @@ export class TooltipWrapper extends React.Component<
trigger,
rootClose,
tooltipClassName,
tooltipArrowClassName,
tooltipBodyClassName,
style,
disabled = false,
Expand Down Expand Up @@ -354,6 +360,7 @@ export class TooltipWrapper extends React.Component<
className={tooltipClassName}
tooltipTheme={tooltipTheme}
showArrow={showArrow}
arrowClassName={tooltipArrowClassName}
bodyClassName={tooltipBodyClassName}
onMouseEnter={
~triggers.indexOf('hover') ? this.tooltipMouseEnter : () => {}
Expand Down
7 changes: 7 additions & 0 deletions packages/amis/src/renderers/TooltipWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,11 @@ export interface TooltipWrapperSchema extends BaseSchema {
*/
className?: string;

/**
* 箭头CSS类名
*/
tooltipArrowClassName?: string;

/**
* 文字提示浮层CSS类名
*/
Expand Down Expand Up @@ -237,6 +242,7 @@ export default class TooltipWrapper extends React.Component<
classPrefix: ns,
classnames: cx,
tooltipClassName,
tooltipArrowClassName,
tooltipTheme,
container,
placement,
Expand Down Expand Up @@ -267,6 +273,7 @@ export default class TooltipWrapper extends React.Component<
placement,
trigger,
rootClose,
tooltipArrowClassName,
container:
container !== undefined
? container
Expand Down

0 comments on commit 0be5988

Please # to comment.