diff --git a/.changeset/eighty-moons-rest.md b/.changeset/eighty-moons-rest.md new file mode 100644 index 000000000..b83bae4ee --- /dev/null +++ b/.changeset/eighty-moons-rest.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(tag): 增加 tooltipProps 参数 diff --git a/.changeset/slow-tables-guess.md b/.changeset/slow-tables-guess.md new file mode 100644 index 000000000..81c49874f --- /dev/null +++ b/.changeset/slow-tables-guess.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/tag": minor +--- + +feat: 增加 tooltipProps 参数 diff --git a/packages/ui/tag/src/Tag.tsx b/packages/ui/tag/src/Tag.tsx index b4c18fcf5..8cac25150 100644 --- a/packages/ui/tag/src/Tag.tsx +++ b/packages/ui/tag/src/Tag.tsx @@ -2,7 +2,7 @@ import React, { forwardRef, useMemo, useState, useEffect, useRef } from 'react' import { cx, getPrefixCls } from '@hi-ui/classname' import { CloseOutlined } from '@hi-ui/icons' import { __DEV__, invariant } from '@hi-ui/env' -import { Tooltip } from '@hi-ui/tooltip' +import { Tooltip, TooltipProps } from '@hi-ui/tooltip' import { HiBaseHTMLProps } from '@hi-ui/core' const _role = 'tag' @@ -36,6 +36,7 @@ export const Tag = forwardRef( autoEditable = false, maxWidth, render = DEFAULT_RENDER, + tooltipProps, ...rest }, ref @@ -116,6 +117,7 @@ export const Tag = forwardRef( ? { component: Tooltip, componentProps: { + ...tooltipProps, title: render(children as React.ReactText), trigger: 'hover', }, @@ -124,7 +126,7 @@ export const Tag = forwardRef( component: React.Fragment, componentProps: {}, }, - [isShowPopover, children, isInEdit, render] + [isShowPopover, isInEdit, tooltipProps, render, children] ) if (__DEV__) { @@ -244,6 +246,11 @@ export interface TagProps extends HiBaseHTMLProps<'div'> { * @default 0 代表不限制宽度 */ maxWidth?: number + /** + * Tooltip 组件参数设置 + * @private + */ + tooltipProps?: Omit } if (__DEV__) { diff --git a/packages/ui/tag/stories/max-width.stories.tsx b/packages/ui/tag/stories/max-width.stories.tsx index 30587fc89..e45efa240 100644 --- a/packages/ui/tag/stories/max-width.stories.tsx +++ b/packages/ui/tag/stories/max-width.stories.tsx @@ -14,7 +14,8 @@ export const MaxWidth = () => {

Tag MaxWidth

max 240px (placeholder1 placeholder2 placeholder3 placeholder4) - + {/* Tooltip 禁用 portal */} + max 240px (placeholder1 placeholder2 placeholder3 placeholder4)