Skip to content

Render title if not a string #8

@fabiancook

Description

@fabiancook

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions