HTML data-attribute not accepting child html class and other attribute

Question

when I working with data attribute, it's accept regular html tag. But not accepting child classes. For example, look at my first code;

<p>Lorem ipsum <a href="#" class="mi-tooltip" data-tooltip="<h1>MIUI_Tooltips is a lightweight.</h1><p>Around 5KB minified </p><u>and offering</u> a wide range <i>of configuration options.</i> <br><br><button> A Button </button>">condimentum</a>.Eros natoque.</p>

It's working good, because I'va added here just regular html tag. But when I add class and value inside data-****** attribute, its not working. Look at the second code;

<p>Lorem ipsum <a href="#" class="mi-tooltip" data-tooltip="<img src="https://images.pexels.com/photos/8726372/pexels-photo-8726372.jpeg?auto=compress&cs=tinysrgb&w=1260" width="100%" class="my-image"/><h1>MIUI_Tooltips is a lightweight.</h1><p>Around 5KB minified </p><u>and offering</u>">condimentum</a>.Eros natoque.</p>

How can I add images, classes, links and other attributes inside one data-atrributes HTML Tag?

Answer 1

Seems like you have to replace " with "

 document.querySelector('a').dataset.tooltip = '<img src="https://images.pexels.com/photos/8726372/pexels-photo-8726372.jpeg?auto=compress&cs=tinysrgb&w=1260" width="100%" class="my-image"/><h1>MIUI_Tooltips is a lightweight.</h1><p>Around 5KB minified </p><u>and offering</u>' console.log(document.querySelector('a').outerHTML) document.body.insertAdjacentHTML('beforeend', document.querySelector('a').dataset.tooltip)

 <p>Lorem ipsum <a href="#" class="mi-tooltip">condimentum</a>.Eros natoque.</p>

 <a href="#" class="mi-tooltip" data-tooltip="<img src=&quot;https://images.pexels.com/photos/8726372/pexels-photo-8726372.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&quot; width=&quot;100%&quot; class=&quot;my-image&quot;/><h1>MIUI_Tooltips is a lightweight.</h1><p>Around 5KB minified </p><u>and offering</u>">condimentum</a>

I guess that ' would also be fine:

 <p>Lorem ipsum <a href="#" class="mi-tooltip" data-tooltip="<img src='https://images.pexels.com/photos/8726372/pexels-photo-8726372.jpeg?auto=compress&cs=tinysrgb&w=1260' width='100%' class='my-image'/><h1>MIUI_Tooltips is a lightweight.</h1><p>Around 5KB minified </p><u>and offering</u>">condimentum</a>.Eros natoque.</p>