React-tooltip: Feature: ReactTooltip.show()

[jcalfee]

I have an important tooltip that I want to show programmatically. I could then set a timeout and ReactTooltip.hide() it .. Best if the hover would prevent it from being hidden.

Do you have an example for this? Should I try to capture an event and pass it to ReactTooltip.showTooltip (e) ?

[wwayne]

Now the react-tooltip doesn't support show programmatically, let me do some develop next.

[marina-marina]

In addition to that, it would be nice if we could choose the way it's triggered - on hover, click or event.

[wwayne]

Thanks @Sly777
v0.9.0 start to support customer event
<ReactTooltip event='click' /> or <a data-event='click' data-tip='tooltip'></a>

[OAGr]

Did this fix the original issue with ReactTooltip.show()? It seems like the .show() method is still missing to me.

[wwayne]

I didn't build the .show method, instead there have custom event to trigger tooltip to show up.

[OAGr]

Thanks for confirming.

[craigcosmo]

how can I trigger custom event?

For example:

<a data-event='specialhat' data-tip='tooltip'></a>

How to trigger such event?

[wwayne]

Behind data-event='event' is document.addEventListener('event', () => {...}, false), so it only support those HTML DOM event like click, doubleClick, etc... so react tooltip can't trigger your custom event specialhat

[craigcosmo]

ah I see. so in case I want to display error tool tip when user input invalid data, what's the best way to trigger it in this case?

It can not be 'click', because it's an input type text. users click it at the beginning.

[wwayne]

@craigcosmo Looks there's no way to satisfy your requirement at the moment, you may need a static method like ReactTooltip.show('tooltipId'), I don't know when I have time to build such function..

[RanjithNair]

@craigcosmo : Were you able to implement show method? Just wanted to check before i give it a try.
@wwayne : Is this something which is still in your radar?

[craigcosmo]

Not yet, if you do, please notify once you got. Im also interested

On Thu, Jun 16, 2016 at 2:29 AM +0700, "Ranjith Nair" [email protected] wrote:

@craigcosmo : Were you able to implement show method? Just wanted to check before i give it a try.

@wwayne : Is this something which is still in your radar?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[wwayne]

No, I don't have any plan on this at the moment. It's not that easy to implement this feature, much less we should have to consider if the user want to show multi tooltip at the same time.

[payner35]

this show() feature would be very useful to highlight icons / locations on a google map. Please let me know how you get on.

[wwayne]

This has been supported since 3.1.5, but you have to specific the target element, for example:

import {findDOMNode} from 'react-dom'
import ReactTooltip from 'react-tooltip'

<p ref='foo' data-tip='tooltip'></p>
<button onClick={() => { ReactTooltip.show(findDOMNode(this.refs.foo)) }}></button>
<ReactTooltip />

[craigcosmo]

thank you so much for making this!

[DeepanshuTaneja]

it shows _XflowTooltip2.default.show is not a function.
I called this function on image click.
My version is 3.2.3

[wwayne]

@DeepanshuTaneja No idea why you got _XflowTooltip2, but I didn't find _XflowTooltip2 in this repo

[ac1dr3d]

thank you!

[mymywang]

@wwayne Thanks for creating the library! I have a question about your example to use ReactTooltip.show(target). Why is the type of the input target string? The return type of findDOMNode is not string, so I wonder if it still works now:

<button onClick={() => { ReactTooltip.show(findDOMNode(this.refs.foo)) }}></button>

I tried to use React.useRef hook, but it usually refers to a DOM element instead of string.

I also looked at the source code, and it seems that the way it works is to create an event by (https://github.com/wwayne/react-tooltip/blob/master/src/decorators/staticMethods.js#L15):

event = document.createEvent("Event");
event.initEvent(eventName, false, true, { target });

However, I tried it out and the function initEvent only accepts 3 input parameters.

All I'm trying to figure out is how to use ReactTooltip.show(target) to manually show the tooltip. Could you provide another example with React.useRef, or add details on what target should be? Thank you very much!

[ZDTaylor]

@mymywang Just ran into this. You can use this for React.useRef:

ReactTooltip.show(tooltipTarget?.current);

Not sure if I did something wrong though, but I had to set data-event="fakeEvent" to stop the default hover behavior.

[mymywang]

@ZDTaylor Thanks. I tried it but typescript complains that the input passed into ReactTooltip.show() should be a string. I didn't try to override the type error though. If it could work, there's probably just an issue in type definitions.

[tim-phillips]

I had to do the following to stop from TS complaining:

const toolTipRef = useRef(null);
useEffect(() => {
  ReactTooltip.show((toolTipRef?.current as unknown) as Element);
});