title: How to wrap a tag that was dynamically added with a component?
body: <p>I have a tooltip component that works by wrapping around things users would hover.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;MyTooltip
    :content="`This text will be shown in tooltip`"
  &gt;
    Hover over me to see tooltip
  &lt;/MyTooltip&gt;
  </code></pre>
  
  <ol>
  <li>I'd like to use the tooltip component to wrap <code>&lt;a class="Bug"&gt;&lt;/a&gt;</code> tag, Like this:</li>
  </ol>
  
  <pre class="lang-html prettyprint-override"><code>&lt;p&gt;some 
  &lt;MyTooltip content="some content"&gt;
      &lt;a class="link"&gt;Bug&lt;/a class="bug"&gt;bug 111&lt;/p&gt; was found
  &lt;/MyTooltip&gt;
  &lt;/p&gt;
  </code></pre>
  
  <ol start="2">
  <li>This <code>&lt;a class="Bug"&gt;&lt;/a&gt;</code> tag was dynamically added by doing regex match in <code>renderMsg</code>. </li>
  </ol>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div @mouseover="onHover&gt;
     &lt;span
       v-html="renderMsg(msg)"
     /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>methods: {
    renderMsg(msg) {
      return txt.replace(some_regex_object, '&lt;a class="bug"&gt;$&amp;&lt;/a&gt;');
    },
    onHover(e) {
      if (e.target.className === 'bug') {
        // tried adding `&lt;MyTooltip content="some content"&gt;${e.target.outerText}&lt;/MyTooltip&gt;` to DOM
      }
    },
  },
  </code></pre>
  
  <p>So you see where the challenge is... I modified <code>&lt;a class="Bug"&gt;&lt;/a&gt;</code> to become <code>&lt;MyTooltip&gt;&lt;a class="Bug"&gt;&lt;/a&gt;&lt;/MyTooltip&gt;</code> using dom manipulation interface (something like <code>parentNodeOfATag.replaceChild</code> with new dom element containing tooltip tag). <code>&lt;MyTooltip&gt;</code> was rendered as <code>&lt;MyTooltip&gt;</code> which has no meaning by itself.</p>