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).
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.
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.
Resolving, feel free to re-open.