mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-27 21:01:57 +00:00
* [accessibility-3690553]:[Screen reader - Azure Cosmos DB-New Container]: Screen reader does not announce the associated label information for the 'Estimated monthly cost' info icon under 'New Container' blade. * snap updated. --------- Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
23 lines
574 B
TypeScript
23 lines
574 B
TypeScript
import { Icon, TooltipHost } from "@fluentui/react";
|
|
import * as React from "react";
|
|
|
|
export interface TooltipProps {
|
|
children: string;
|
|
className?: string;
|
|
ariaLabelForTooltip?: string;
|
|
}
|
|
|
|
export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({
|
|
children,
|
|
className,
|
|
ariaLabelForTooltip = children,
|
|
}: TooltipProps) => {
|
|
return (
|
|
<span className={className}>
|
|
<TooltipHost content={children}>
|
|
<Icon iconName="Info" aria-label={ariaLabelForTooltip} className="panelInfoIcon" tabIndex={0} />
|
|
</TooltipHost>
|
|
</span>
|
|
);
|
|
};
|