Skip to content

Render title if not a string #8

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>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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