react-tooltip-component icon indicating copy to clipboard operation
react-tooltip-component copied to clipboard

Render title if not a string

Open fabiancook opened this issue 7 years ago • 0 comments

If you check the value of title is not a string, assume that it is a react element, this allows for the tooltip to render anything in the tooltip with no issues

renderTooltip = (element) => {
    if (typeof this.props.title === 'string') {
      element.textContent = this.props.title;
    } else {
      ReactDOM.render(this.props.title, element);
    }
  };
componentDidMount = () => {
    // Removed code
    let tooltipContentEl = document.createElement('div');
    tooltipContentEl.className = 'tooltip-inner';
    this.renderTooltip(tooltipContentEl);
    // Removed code
  };
componentDidUpdate = () => {
    this.tooltipEl.className = 'tooltip ' + this.props.position;
    this.renderTooltip(this.tooltipEl.childNodes[1]);
  };

(Notice how the second text is strong)

image

image

By doing this I can also use React.Fragment to allow direct rendering to that tooltip element

image image

<Tooltip title={<React.Fragment>Test <strong>Test</strong></React.Fragment>}>{/*Removed*/}</Tooltip>

fabiancook avatar Feb 15 '18 03:02 fabiancook