Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

tooltip箭头增加可配置class #11447

Merged
merged 1 commit into from
Jan 4, 2025
Merged

tooltip箭头增加可配置class #11447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 23 additions & 22 deletions docs/zh-CN/components/tooltip-wrapper.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading