Demo usage is confusing / not explained

[vivaldus]

The working demo looks promising, but I gave up almost instantly trying to implement this library for the following reasons:

1. No explanation given at all for why there are two declarations of given one after the other. Why -- I ask myself -- don't you just move props autoPosition events delay={100} from first to second (and get rid of first)? I'm sure there's a reason that's clear to the architect, but it's not intuitive or explained.

    <ReactHint autoPosition events delay={100} />
			<ReactHint persist
				attribute="data-custom"
				className="custom-hint"
				events={{click: true}}
				onRenderContent={this.onRenderContent}
				ref={(ref) => this.instance = ref} />

2. What is this.instance? There is no such property given in the component

[slmgc]

Hi! Thanks for your feedback! I agree the documentation requires some love and improvement. For a detailed explanation, I advise you to check this issue: #13. this.instance is not part of API, it's just a property of a component which holds a reference to a custom tooltip, you can read about them here: https://reactjs.org/docs/refs-and-the-dom.html#callback-refs.
Hope this helps!

[capi1O]

Well it is even more confusing after reading (the beginning of) issue #13. The reference this.instance is simply used to toggle the tooltip, this is ok, but where should we define the content which appears inside a tooltip ?

As I understand it it needs to be defined in another DOM node which has data-rh attribute but there are many is the example so I don't really get it.

edit :

well turned out that data-rh is not used for content as stated in the doc. content is passed via onRenderContent, see example below :

export default class MyComponent extends PureComponent
{
	constructor(props)
	{
		super(props);
		this.handleClick = this.handleClick.bind(this);
		this.reactHint = React.createRef();
	}

	handleClick()
	{
		this.tooltip.toggleHint();
	}

	render()
	{
		const ReactHint = ReactHintFactory(React);

		return (<React.Fragment>
			<ReactHint
				attribute="data-toggle"
				autoPosition
				events
				delay={100}
				ref={(ref) => { this.tooltip = ref; }}
				onRenderContent={(target, content) => (
					<React.Fragment>
						<p>Hello W0rld</p>
						{target.someData}
					</React.Fragment>)}
			/>

			<div data-toggle onClick={this.handleClick}>Hover me to toggle React Hint</div>

			<button onClick={this.handleClick}>Click me to toggle React Hint</button>

			</React.Fragment>);
	}
}

[slmgc]

ReactHint is (in 99% of cases) a singleton-component which is used to render tooltips, but you define the content using data-rh attributes on the elements which are supposed to have tooltips.

ReactHint is not your regular wrapping tooltip component library, this is the main point of confusion, e.g. this is incorrect:

<ReactHint>
     <div>Content of the toolttip</div>
</ReactHint>

@monkeydri

well turned out that data-rh is not used for content as stated in the doc. content is passed via onRenderContent

Actually, data-rh attribute is used to define a text content of a tooltip:

<button data-rh="a tooltip">Click me</button>

onRenderContent is used to customize the content wrapper of the tooltip or to show HTML content, in cases when a simple text is not enough:

<button data-rh="a tooltip">Click me</button>
...
// This will wrap the text of all tooltips into `<b /> tag`.
// In this example `content` === "a tooltip"
onRenderContent{(target, content) => <b>{content}</b>}

As for your example:

    render() {
        const ReactHint = ReactHintFactory(React);

Performance-wise you shouldn't place a factory inside of the render method as it will re-create a new instance of ReactHint on every render/change.

[capi1O]

Thanks for your answer, I understand now why the doc stated that data-rh was used to pass content. I will submit a PR to try to summarize your explanations here and in #13.

For the const ReactHint = ReactHintFactory(React); inside render() yes indeed the example was not really wise ! I did like in the examples in my app (call it a top of file before component class definition).