Make tooltips keyboard accessible (#7281)
* show tooltips on hover in eventtile Signed-off-by: Kerry Archibald <kerrya@element.io> * use tooltip props pass thru * use tooltiptarget in InfoTooltip Signed-off-by: Kerry Archibald <kerrya@element.io> * use target in TestWithTooltip Signed-off-by: Kerry Archibald <kerrya@element.io> * tsc fixes Signed-off-by: Kerry Archibald <kerrya@element.io> * test tooltip target Signed-off-by: Kerry Archibald <kerrya@element.io> * lint fix Signed-off-by: Kerry Archibald <kerrya@element.io> * rename tooltip handlers Signed-off-by: Kerry Archibald <kerrya@element.io> * update copyright to 2021 Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
parent
4712ae49b2
commit
0c850b2f13
11 changed files with 242 additions and 98 deletions
|
@ -33,7 +33,7 @@ export enum Alignment {
|
|||
Bottom, // Centered
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
export interface ITooltipProps {
|
||||
// Class applied to the element used to position the tooltip
|
||||
className?: string;
|
||||
// Class applied to the tooltip itself
|
||||
|
@ -46,10 +46,13 @@ interface IProps {
|
|||
label: React.ReactNode;
|
||||
alignment?: Alignment; // defaults to Natural
|
||||
yOffset?: number;
|
||||
// id describing tooltip
|
||||
// used to associate tooltip with target for a11y
|
||||
id?: string;
|
||||
}
|
||||
|
||||
@replaceableComponent("views.elements.Tooltip")
|
||||
export default class Tooltip extends React.Component<IProps> {
|
||||
export default class Tooltip extends React.Component<ITooltipProps> {
|
||||
private tooltipContainer: HTMLElement;
|
||||
private tooltip: void | Element | Component<Element, any, any>;
|
||||
private parent: Element;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue