title: How to convert data attribute string value to html elements?
body: <p>I am new to programming and English language.</p>
  
  <p>I am working on showing the <code>tooltip</code> with the dynamic content loading using CSS.</p>
  
  <p>The problem is, </p>
  
  <p>I am pushing the values that contains html element tags to the data-info attribute dynamically using <code>JQuery</code>. It is stored as a string and while displaying on <code>tooltip</code> it is showing with html tags as strings.</p>
  
  <p>Is there any possible way to show the <code>tooltip</code> with the values formatted as HTML.</p>
  
  <p>I'm trying with the following is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var divContent ;
         $(document).ready(function(){
      
            function getContent(){
                var divAry = [];
                var str;
                divAry.push("&lt;li&gt;ABC&lt;/li&gt;");
                divAry.push("&lt;li&gt;DEF&lt;/li&gt;");
                str = "&lt;ul&gt;"+divAry.toString().replace(/,&lt;li&gt;/g,"&lt;li&gt;").replace(/,/g,"")+"&lt;/ul&gt;";
                return str;
            }
            $('#linkId').mouseover(function(){
                divContent = getContent();
                var jObj = $($.parseHTML(divContent));
                $(this).attr('data-info',divContent);
            });
      
         });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tooltip{
    display: inline;
    position: relative;
  }
  .tooltip:hover:after{
    background: grey;   
    border-radius: 5px;  
    color: #000;
    content: attr(data-info);
    top: 26px;
    left: 40%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
  }
  .tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    top : 10px;
    bottom: 100%;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid grey;
    border-left: 10px solid transparent;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  
  &lt;a id="linkId" href="#" class="tooltip"&gt;Hover here&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please anyone get me rid out of this.</p>
  
  <p>Thanks in advance.</p>