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 ?
>Solution :
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="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>
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>