<p dir="auto">I tried adding unique keys everywhere but no luck.</p>
<p dir="auto">Probably this warning is due to an internal bug? Can you check that you assign unique keys in the iterator for table header contents?</p>
<h2 dir="auto">Summary</h2>

<p dir="auto">The <code class="notranslate">title</code> API of Tooltip is clashing with the <code class="notranslate">title</code> of <strong>StandardHtmlAttribute</strong>.</p>

<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">I expect no error will be thrown by TypeScript compiler when I assign a ReactNode to the <code class="notranslate">title</code> property of Tooltip.</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">TypeScript compiler will throw an error saying that you cannot assign <code class="notranslate">ReactNode</code> to <code class="notranslate">string</code>.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<ol dir="auto">
<li>Assume you are in a <code class="notranslate">*.ts</code> file and you are using TS compiler.</li>
<li>The following code will cause the TS compiler to throw an error.</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const tooltipTitle = () =&gt; {
    return (
        &lt;Typography type=&quot;body2&quot; align=&quot;center&quot;&gt;
            {&quot;Hey brother and sister&quot;}
        &lt;/Typography&gt;
    );
};

render () =&gt; {
    return (
        &lt;Tooltip title={tooltipTitle()}&gt; ... &lt;/Tooltip&gt;
    );
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-en">tooltipTitle</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Typography</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"body2"</span> <span class="pl-c1">align</span><span class="pl-c1">=</span><span class="pl-s">"center"</span><span class="pl-c1">&gt;</span>
            <span class="pl-kos">{</span><span class="pl-s">"Hey brother and sister"</span><span class="pl-kos">}</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Typography</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-en">render</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=</span><span class="pl-c1">&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-c1">return</span> <span class="pl-kos">(</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Tooltip</span> <span class="pl-c1">title</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-en">tooltipTitle</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span> ... <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Tooltip</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<ol start="3" dir="auto">
<li>The error would look like the following :</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="message: 'Type '{ title: Element; placement: &quot;bottom&quot;; children: Element; }' is not assignable to type 'IntrinsicAttributes &amp; HTMLAttributes&lt;HTMLDivElement&gt; &amp; { disableTriggerFocus?: boolean; disableTr...'.
  Type '{ title: Element; placement: &quot;bottom&quot;; children: Element; }' is not assignable to type 'HTMLAttributes&lt;HTMLDivElement&gt;'.
    Types of property 'title' are incompatible.
      Type 'Element' is not assignable to type 'string'.'
source: 'ts'"><pre class="notranslate"><code class="notranslate">message: 'Type '{ title: Element; placement: "bottom"; children: Element; }' is not assignable to type 'IntrinsicAttributes &amp; HTMLAttributes&lt;HTMLDivElement&gt; &amp; { disableTriggerFocus?: boolean; disableTr...'.
  Type '{ title: Element; placement: "bottom"; children: Element; }' is not assignable to type 'HTMLAttributes&lt;HTMLDivElement&gt;'.
    Types of property 'title' are incompatible.
      Type 'Element' is not assignable to type 'string'.'
source: 'ts'
</code></pre></div>
<h2 dir="auto">Why does this happen ?</h2>
<p dir="auto">Apparently, this is due to the clashing API for <code class="notranslate">title</code> in StandardHtmlAttribute and TooltipProperty :</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Tooltip.d.ts
export type TooltipProps = React.HTMLAttributes&lt;HTMLDivElement&gt; &amp; {
    ...
    title: React.ReactNode;
    ...
}"><pre class="notranslate"><span class="pl-c">// Tooltip.d.ts</span>
<span class="pl-k">export</span> <span class="pl-k">type</span> <span class="pl-smi">TooltipProps</span> <span class="pl-c1">=</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">HTMLAttributes</span><span class="pl-kos">&lt;</span><span class="pl-smi">HTMLDivElement</span><span class="pl-kos">&gt;</span> <span class="pl-c1">&amp;</span> <span class="pl-kos">{</span>
    ...
    <span class="pl-c1">title</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">ReactNode</span><span class="pl-kos">;</span>
    ...
<span class="pl-kos">}</span></pre></div>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// index.d.ts
interface HTMLAttributes&lt;T&gt; extends DOMAttributes&lt;T&gt; {
    ....
    // Standard HTML Attributes
    title?: string;
    ...."><pre class="notranslate"><span class="pl-c">// index.d.ts</span>
<span class="pl-k">interface</span> <span class="pl-smi">HTMLAttributes</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span><span class="pl-c1">&gt;</span> <span class="pl-k">extends</span> <span class="pl-smi">DOMAttributes</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span>
    ...<span class="pl-kos">.</span>
    <span class="pl-c">// Standard HTML Attributes</span>
    <span class="pl-c1">title</span>?: <span class="pl-smi">string</span><span class="pl-kos">;</span>
    ...<span class="pl-kos">.</span></pre></div>
<p dir="auto">Due to this reason, the TypeScript compiler is confused about the <code class="notranslate">title</code> property.</p>
<h2 dir="auto">Proposed solution</h2>
<p dir="auto">Rename <code class="notranslate">title</code> property of Tooltip into <code class="notranslate">tooltipBody</code> .</p>
<h2 dir="auto">Context</h2>
    
<p dir="auto">Typescript</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1-beta</td>
</tr>
</tbody>
</table>
<h3 dir="auto">Tags</h3>
<p dir="auto">TypeScript, v1-beta</p>