Possibility to pass a component to be rendered in the tooltip content

[adardesign]

Is there a way to render a component as the tooltip's content?

For example:

<ReactHint
	persist
	attribute="data-tooltip"
	events={{click: true}}
	onRenderContent={(target) => (<div><p>`tooltip ${target.content}`</p></div>)}
/>

const TooltipContentComponent = (props) => <p>content {props.prop1}</p>;

      <button data-tooltip data-tooltip-content={TooltipContentComponent}>
        Default
      </button>

[slmgc]

Hi! I don't really get your question as onRenderContent is used to show components within tooltips, e.g.:

<ReactHint events onRenderContent={(target, content) =>
	<AnyCustomComponent id={target.dataset.someId}>{content}</AnyCustomComponent />
} />
...
<button data-rh="This is the content" data-some-id="123">Click me</button>

[adardesign]

I understad..

But what if each button needs a different custom component
I don't want to have multiple ReactHints when the only difference is the component passed long.

Here is a example of how I got around this issue.

import React from 'react';
import Tooltip from '../../../components/Molecules/Tooltip/'; // a wrapper around ReactHint

const index = class extends React.Component {
  render() {
    return (
      <p>
        state: {this.state.test}
        prop: {this.props.prop2}
      </p>
    );
  }
};

const ComponentMap = {
  comp1: props => <p>test {props.prop1}</p>,
  comp2: props => <p>test {props.prop2}</p>,
};

export default () => {
  return (
    <div>
      <h2 className="component-title">Tooltip</h2>

      <Tooltip
        autoPosition
        attribute="data-tooltip"
        events
        delay="10"
        persist={true}
        onRenderContent={(target, content) => {
          const componentRef = target.dataset.tooltipContent;
          const Comp = ComponentMap[componentRef];
          const props = JSON.parse(target.dataset.tooltipProps);
          return (
            <div className="custom-hint__content">
              <p>This is the tooltip content</p>
              <Comp {...props} />
            </div>
          );
        }}
      />

      <p
        data-tooltip
        data-tooltip-at="bottom"
        data-tooltip-content="comp1"
        data-tooltip-Props='{"prop1":"1","prop2":"2"}'
      >
        Hover here
      </p>

      <span
        data-tooltip
        data-tooltip-at="right"
        data-tooltip-content="comp2"
        data-tooltip-Props='{"prop1":"1","prop2":"2"}'
      >
        Hover here
      </span>
    </div>
  );
};

[slmgc]

@adardesign I am working on a new major version. Will keep your case in mind