react-tooltip-component
react-tooltip-component copied to clipboard
Render title if not a string
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)


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

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