add focus trigger support

Author: mohsinulhaq

.size-snapshot.json

@@ -1,20 +1,20 @@
 {
   "dist/cjs/react-popper-tooltip.js": {
-    "bundled": 14432,
-    "minified": 7751,
-    "gzipped": 2292
+    "bundled": 14634,
+    "minified": 7853,
+    "gzipped": 2322
   },
   "dist/esm/react-popper-tooltip.js": {
-    "bundled": 14393,
-    "minified": 7727,
-    "gzipped": 2287,
+    "bundled": 14595,
+    "minified": 7829,
+    "gzipped": 2316,
     "treeshaked": {
       "rollup": {
         "code": 172,
         "import_statements": 152
       },
       "webpack": {
-        "code": 8447
+        "code": 8537
       }
     }
   }

.travis.yml

@@ -1,14 +1,10 @@
-dist: xenial
 language: node_js
 node_js:
   - '--lts'
 cache: yarn
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash
   - source ~/.bashrc
-branches:
-  except:
-    - gh-pages
 script:
   - yarn typecheck
   - yarn lint

docs/readme.mdx

@@ -58,6 +58,45 @@ _`followCursor` prop_
   </BasicTooltipTrigger>
 </Playground>
 
+## `focus` trigger
+
+<Playground>
+  <div
+    tabIndex="-1"
+    style={{
+      border: '1px solid silver',
+      padding: 20,
+      display: 'flex',
+      justifyContent: 'space-between'
+    }}
+  >
+    <div
+      style={{
+        display: 'flex',
+        flex: 2,
+        flexDirection: 'column',
+        justifyContent: 'space-around',
+        alignItems: 'center'
+      }}
+    >
+      <BasicTooltipTrigger
+        trigger="focus"
+        tooltip="Hello, World!"
+        placement="top"
+      >
+        <button>Focus me!</button>
+      </BasicTooltipTrigger>
+      <BasicTooltipTrigger trigger="focus" tooltip="Hello, World!">
+        <button>Focus me too!</button>
+      </BasicTooltipTrigger>
+    </div>
+    <div style={{flex: 3, fontSize: 12, textAlign: 'center', padding: 50}}>
+      Click inside this area and focus using the Tab key on desktop. On mobile,
+      just click on the buttons.
+    </div>
+  </div>
+</Playground>
+
 ## Controlled
 
 _`tooltipShown` prop_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-popper-tooltip",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "description": "React tooltip library built around react-popper",
   "homepage": "https://react-popper-tooltip.netlify.com",
   "repository": {

src/TooltipTrigger.tsx

@@ -210,6 +210,7 @@ class TooltipTrigger extends Component<
     const isClickTriggered = trigger === 'click';
     const isHoverTriggered = trigger === 'hover';
     const isRightClickTriggered = trigger === 'right-click';
+    const isFocusTriggered = trigger === 'focus';
 
     return {
       ...props,
@@ -227,7 +228,11 @@ class TooltipTrigger extends Component<
       ...(isHoverTriggered &&
         followCursor && {
           onMouseMove: callAll(this.showTooltip, props.onMouseMove)
-        })
+        }),
+      ...(isFocusTriggered && {
+        onFocus: callAll(this.showTooltip, props.onFocus),
+        onBlur: callAll(this.hideTooltip, props.onBlur)
+      })
     };
   };
 }

src/types.ts

@@ -2,13 +2,17 @@ import PopperJS from 'popper.js';
 import React from 'react';
 import ReactPopper from 'react-popper';
 
+export type TriggerTypes = 'none' | 'click' | 'right-click' | 'hover' | 'focus';
+
 export interface GetTriggerPropsArg {
   onTouchEnd?(event: React.SyntheticEvent): void;
   onClick?(event: React.SyntheticEvent): void;
   onContextMenu?(event: React.SyntheticEvent): void;
   onMouseEnter?(event: React.SyntheticEvent): void;
   onMouseLeave?(event: React.SyntheticEvent): void;
   onMouseMove?(event: React.SyntheticEvent): void;
+  onFocus?(event: React.SyntheticEvent): void;
+  onBlur?(event: React.SyntheticEvent): void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;
 }
@@ -98,7 +102,7 @@ export interface TooltipTriggerProps {
    * Event that triggers the tooltip
    * @default hover
    */
-  trigger: 'none' | 'click' | 'right-click' | 'hover';
+  trigger: TriggerTypes;
   /**
    * Whether to use React.createPortal for creating tooltip
    * @default true // for browser environments
@@ -132,7 +136,7 @@ export interface TooltipProps {
   outOfBoundaries: boolean | null;
   placement: PopperJS.Placement;
   style: React.CSSProperties;
-  trigger: 'none' | 'click' | 'right-click' | 'hover';
+  trigger: TriggerTypes;
   clearScheduled(): void;
   hideTooltip(): void;
   tooltip(arg: TooltipArg): React.ReactNode;

tests/TooltipTrigger.spec.tsx

@@ -178,6 +178,31 @@ describe('follow cursor', () => {
   });
 });
 
+describe('focus trigger', () => {
+  let container: HTMLElement;
+  let queryByText: any;
+
+  beforeEach(() => {
+    ({container, queryByText} = render(
+      <BasicTooltipTrigger trigger="focus" tooltip={Tooltip}>
+        {Trigger}
+      </BasicTooltipTrigger>
+    ));
+    fireEvent.focus(container.firstChild as HTMLElement);
+    jest.runAllTimers();
+  });
+
+  it('opens tooltip on focus', () => {
+    expect(queryByText(Tooltip)).toBeTruthy();
+  });
+
+  it('closes tooltip on blur', () => {
+    fireEvent.blur(container.firstChild as HTMLElement);
+    jest.runAllTimers();
+    expect(queryByText(Tooltip)).toBeFalsy();
+  });
+});
+
 it('closes on outside click', () => {
   const {container, queryByText} = render(
     <>