diff --git a/types/react-tooltip/index.d.ts b/types/react-tooltip/index.d.ts index c4c380f533..c8a19073b1 100644 --- a/types/react-tooltip/index.d.ts +++ b/types/react-tooltip/index.d.ts @@ -9,6 +9,22 @@ import * as React from "react"; declare class ReactTooltip extends React.Component { } 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; diff --git a/types/react-tooltip/react-tooltip-tests.tsx b/types/react-tooltip/react-tooltip-tests.tsx index 7fa5332f27..5da85d8c59 100644 --- a/types/react-tooltip/react-tooltip-tests.tsx +++ b/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 { இдஇ - { console.log("afterHide"); }}> + { + console.log("afterHide"); + }} + > Show sad face σ`∀´)σ (〃∀〃) - { console.log("afterShow"); }}> + { + console.log("afterShow"); + }} + >

This is a global react component tooltip

You can put every thing here

    @@ -74,6 +87,31 @@ export class ReactTooltipTest extends React.PureComponent { Show happy face + +

    +