在 div 中添加一个 span 并使用 dangerouslySetInnerHTML 来显示工具提示

Question

There is a div element which has a link to a page set like this:

  <a href={row.original.productURL}>
    <div className="product-sku">
      <p>{row.values.sku}</p>
      <div
        className="product-details"
        dangerouslySetInnerHTML={{
          __html: row.original.description
        }}>
      </div>
    </div>
  </a>

it works fine but I want to add a tooltip to it when hover, so I tried to add a span inside the div:

  <a href={row.original.productURL}>
    <div className="product-sku">
      <p>{row.values.sku}</p>
      <div
        className="tooltip product-details"
        dangerouslySetInnerHTML={{
          __html: row.original.description
        }}>
        <span className="tooltiptext">This is my tooltip</span>
      </div>
    </div>
  </a>

It seems to be forbidden as it returns an error:

Uncaught Error: Can only set one of children or props.dangerouslySetInnerHTML .

Is there a way to add a tooltip in this case?

Answer 1

A bit late for what you asked, however if someone else is having this issue... you just have to simply append your HTML to the __html prop.

Basically this:

<div
    className="tooltip product-details"
    dangerouslySetInnerHTML={{
      __html: row.original.description
    }}>
    <span className="tooltiptext">This is my tooltip</span>
</div>

becomes this:

<div
    className="tooltip product-details"
    dangerouslySetInnerHTML={{
      __html: row.original.description + `<span class="tooltiptext">This is my tooltip</span>`
    }}>
</div>

This allows you to nest div/span classes within a div which uses the dangerouslySetInnerHTML prop.