slmgc/react-hint

Add option to show tooltip by default

ptisdel opened this issue · 4 comments

Could you add a feature whereby the tooltip would start as visible on page load? I have a situation where I need to call attention to a new page element, and dismiss the tooltip on a click anywhere on the page (which you've already implemented).

slmgc commented

Hi, I believe there is a way how to show a tooltip:

// Firstly, you have to get an instance of react-hint.
// Don't add `events` property in case you want to show tooltips programmatically.
<ReactHint ref={(ref) => this.instance = ref} />

// Secondly, you need to get a reference to a dom-element with a tooltip:
<button data-rh="a tooltip" ref={(ref) => this.button = ref}>A button</button> 

// Now you can show the tooltip any time you need, for example, in `componentDidMount` method:
componentDidMount() {
    // Show the tooltip for the button
    this.instance.toggleHint({target: this.button})

    // Want to hide it after 3 seconds? It's easy:
    setTimeout(() => this.instance.toggleHint({target: null}), 3000)
}

Hope this helps!

That helps! Do I have to provide a specific target? I see this.instance.toggleHint() doesn't work without a reference. Ideally I could just toggleHint for all elements with the data-rh attribute. Gaining target refs several levels beneath the ToolTipProvider is a bit painful.

slmgc commented

There is no API for toggling tooltips for all elements with data-rh and I don't see an easy and convenient way to do that. If you have an idea in mind how to do that, I am open for suggestions.

slmgc commented

Resolving, feel free to re-open.