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 ?

@Pete If I escape my quotes, How can I use / add classes, ids, url ...? — Asma Binta Younus
– Asma Binta Younus, Commented Jan 5, 2023 at 15:35

Konrad · Accepted Answer · 2023-01-05 15:48:44Z

3

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>

edited Jan 5, 2023 at 15:48

answered Jan 5, 2023 at 15:36

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Asma Binta Younus Over a year ago

@Konard Many Many Thanks, but it it possible to use double qoutation anyway...? I see that, single quotation working well. Though I'm asking you that, is there any way to use double quotation without any problem....? Thanks in advance

Konrad Over a year ago

@AsmaBintaYounus probably not, because html parser won't know where the attribute ends

Asma Binta Younus Over a year ago

@Konard Ok, so as theres I've used a class for image " class='my-image' "..... Can I select this class without adding .my-image property name in css stylesheet...? I want to use it like that way .any-div img or .any-div>img ........ Is it possible ?

Konrad Over a year ago

I don't quite get it. What do you mean by select? The string in data- attribute is not in the dom tree until you add it

Asma Binta Younus Over a year ago

@Konard..... Oh.. I see... Thats mean for designing the tag inside data-attribute, I need to add a class or ID and then by declaring the class name in css stylesheet, I can Design it...

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related