diff --git a/change/@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json b/change/@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json new file mode 100644 index 00000000000000..1487065ebf0477 --- /dev/null +++ b/change/@fluentui-react-4d88449d-bf95-4d68-97d6-aac8295938bf.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "fix(TooltipHost): TooltipHost supports an accessible way to implement overflow tooltips", + "packageName": "@fluentui/react", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx b/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx index d4866ddfa8ed04..3f44aa06c94b4f 100644 --- a/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx +++ b/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx @@ -11,6 +11,9 @@ const contentParent = const contentSelf = "If the TooltipHost's content overflows, hovering here will show a tooltip (anchored to the TooltipHost)."; +const contentLink = + "If the link's content overflows, hovering or focusing here will show a tooltip (anchored to the TooltipHost)."; + // The TooltipHost uses display: inline by default, which causes issues with this example's // styling and layout. Use display: block instead. (other styles are just to look nice) const theme = getTheme(); @@ -32,12 +35,16 @@ const classNames = mergeStyleSets({ border: '2px dashed ' + theme.palette.neutralTertiary, selectors: { '> *:last-child': { marginTop: 10 } }, }, + // links are inline by default, so this allows the link to have overflow styles + link: { + display: 'inline-block', + }, }); export const TooltipOverflowExample: React.FunctionComponent = () => { const parentTooltipId = useId('text-tooltip'); const [shouldOverflow, setShouldOverflow] = React.useState(false); - const [isParentTooltipVisible, setIsParentTooltipVisible] = React.useState(false); + const linkRef = React.useRef(null); const onOverflowChange = React.useCallback(() => setShouldOverflow(!shouldOverflow), [shouldOverflow]); @@ -48,6 +55,10 @@ export const TooltipOverflowExample: React.FunctionComponent = () => { {/* Example of TooltipOverflowMode.Parent */}
+

+ Warning! This is not keyboard accessible, and should only be done when users have another method to access the + content. +

{/* This parent element will overflow */}
@@ -56,14 +67,10 @@ export const TooltipOverflowExample: React.FunctionComponent = () => { overflowMode={TooltipOverflowMode.Parent} // In a case like this, you should usually display the non-truncated content in the tooltip. content={contentParent} - // If targeting the tooltip to the parent, it's necessary to manually set and remove - // aria-describedby for the content when the tooltip is shown/hidden - onTooltipToggle={setIsParentTooltipVisible} id={parentTooltipId} styles={hostStyles} > - This is the TooltipHost area.{' '} - {contentParent} + This is the TooltipHost area. {contentParent}
@@ -71,19 +78,38 @@ export const TooltipOverflowExample: React.FunctionComponent = () => { {/* Example of TooltipOverflowMode.Self */}
+

+ Warning! This is not keyboard accessible, and should only be done when users have another method to access the + content. +

This is the TooltipHost area. {contentSelf}
+ + {/* Example of TooltipOverflowMode.Custom */} +
+ +

Note: This is the only way to create an overflow tooltip that is keyboard-accessible.

+ + + + This is a link in the TooltipHost area. {contentLink} + + +
); }; diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index 8e12a477b06bd6..143eea0af596b7 100644 --- a/packages/react/etc/react.api.md +++ b/packages/react/etc/react.api.md @@ -9469,6 +9469,7 @@ export interface ITooltipHostProps extends Omit; content?: string | JSX.Element | JSX.Element[]; + customOverflowTarget?: HTMLElement | null; delay?: TooltipDelay; directionalHint?: DirectionalHint; directionalHintForRTL?: DirectionalHint; @@ -11300,6 +11301,7 @@ export class TooltipHostBase extends React_2.Component