- Added missing static methods on ReactTooltip (#20183)

- Defined data-* attributes in an interface to help developers understand which attributes are handled by the library (and their possible values)

types/react-tooltip/index.d.ts

@@ -9,6 +9,22 @@ import * as React from "react";
 declare class ReactTooltip extends React.Component<ReactTooltip.Props> { }
 
 declare namespace ReactTooltip {
+    /**
+     * Hide the tooltip manually, the target is optional, if no target passed in, all existing tooltips will be hidden
+     * @param {Element} target
+     */
+    function hide(target?: Element): void;
+
+    /**
+     * Rebinding all tooltips
+     */
+    function rebuild(): void;
+
+    /**
+     * Show specific tooltip manually
+     */
+    function show(target: Element): void;
+
     interface Offset {
         top?: number;
         right?: number;
@@ -16,17 +32,49 @@ declare namespace ReactTooltip {
         bottom?: number;
     }
 
-    type ElementEvents = keyof HTMLElementEventMap;
-    type WindowEvents = keyof WindowEventMap;
+    /**
+     * Adding `| string` seems strange but multiple events joined by a space are allowable, i.e. "click focus", so
+     * at least using *EventMap will give developers some type hinting, but there's no way we can reliably
+     * type this.
+     */
+    type ElementEvents = (keyof HTMLElementEventMap) | string;
+    type WindowEvents = (keyof WindowEventMap) | string;
 
     type GetContentCallback = () => React.ReactNode;
     type GetContent = GetContentCallback | [GetContentCallback, number];
 
+    type Place = "top" | "right" | "bottom" | "left";
+    type Type = "success" | "warning" | "error" | "info" | "light";
+    type Effect = "float" | "solid";
+
+    /**
+     * Available data-* attributes to be used by a tooltip, this interface isn't used by ReactTooltip itself as any
+     * data-* attribute can exist on a JSX element without type checking, but it at least be useful for developers
+     * to ensure they're using attributes which ReactTooltip support
+     */
+    interface DataProps {
+        'data-place'?: Place;
+        'data-type'?: Type;
+        'data-effect'?: Effect;
+        'data-event'?: ElementEvents;
+        'data-event-off'?: ElementEvents;
+        'data-iscapture'?: boolean;
+        'data-offset'?: Offset;
+        'data-multiline'?: boolean;
+        'data-class'?: string;
+        'data-html'?: boolean;
+        'data-delay-hide'?: number;
+        'data-delay-show'?: number;
+        'data-border'?: boolean;
+        'data-tip-disable'?: boolean;
+        'data-scroll-hide'?: boolean;
+    }
+
     interface Props {
         id?: string;
-        place?: "top" | "right" | "bottom" | "left";
-        type?: "success" | "warning" | "error" | "info" | "light";
-        effect?: "float" | "solid";
+        place?: Place;
+        type?: Type;
+        effect?: Effect;
         event?: ElementEvents;
         eventOff?: ElementEvents;
         globalEventOff?: WindowEvents;

types/react-tooltip/react-tooltip-tests.tsx

@@ -1,7 +1,12 @@
 import * as React from "react";
+import { findDOMNode } from "react-dom";
 import * as ReactTooltip from "react-tooltip";
 
 export class ReactTooltipTest extends React.PureComponent {
+    componentDidMount() {
+        ReactTooltip.rebuild();
+    }
+
     render() {
         const getContent: ReactTooltip.GetContent = [() => Math.floor(Math.random() * 100), 30];
 
@@ -12,13 +17,21 @@ export class ReactTooltipTest extends React.PureComponent {
             </ReactTooltip>
 
             <a data-tip data-for="sadFace"> இдஇ </a>
-            <ReactTooltip id="sadFace" type="warning" effect="solid" afterHide={() => { console.log("afterHide"); }}>
+            <ReactTooltip
+                id="sadFace" type="warning" effect="solid" afterHide={() => {
+                console.log("afterHide");
+            }}
+            >
                 <span>Show sad face</span>
             </ReactTooltip>
 
             <a data-tip data-for="global"> σ`∀´)σ </a>
             <a data-tip data-for="global"> (〃∀〃) </a>
-            <ReactTooltip id="global" aria-haspopup="true" role="example" afterShow={() => { console.log("afterShow"); }}>
+            <ReactTooltip
+                id="global" aria-haspopup="true" role="example" afterShow={() => {
+                console.log("afterShow");
+            }}
+            >
                 <p>This is a global react component tooltip</p>
                 <p>You can put every thing here</p>
                 <ul>
@@ -74,6 +87,31 @@ export class ReactTooltipTest extends React.PureComponent {
                     Show happy face
                 </span>
             </ReactTooltip>
+
+            <p data-for="show-on-click" ref="fooShow" data-tip="tooltip" />
+            <button
+                onClick={() => {
+                    ReactTooltip.show(findDOMNode(this.refs.fooShow));
+                }}
+            />
+            <ReactTooltip id="show-on-click" />
+
+            <p data-for="hide-on-click" ref="fooHide" data-tip="tooltip"/>
+            <button
+                onClick={() => {
+                    ReactTooltip.hide(findDOMNode(this.refs.fooHide));
+                }}
+            />
+            <ReactTooltip id="hide-on-click" />
+
+            <CommonTooltipComponent data-tip="my tooltip" />
         </div>;
     }
 }
+
+const CommonTooltipComponent: React.SFC<ReactTooltip.DataProps> = (props) => (
+    <div>
+        <p {...props}/>
+        <ReactTooltip />
+    </div>
+);