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:
Kerry 2021-12-09 11:47:50 +01:00 committed by GitHub
parent 4712ae49b2
commit 0c850b2f13
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 242 additions and 98 deletions

View file

@ -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;