HTML: nesting strings in strings in attributes

Question

My website contains bootstrap popovers with HTML code. Such a popover looks like this (instead of the popup HTML, I've put in a placeholder for readability):

<mark data-content="Fancy HTML here" data-html="true" data-toggle="popover">
    This mark has a popover
</mark>

Inserting real HTML in the data-content brings up the problem of escaping quotes properly. I found this question, which looks like an exact duplicate: How do I encode html for Bootstrap popover and tooltip content

The accepted answer recommends to escape quotes to " This doesn't work, the escaped quotes are not parsed properly. I've set up an example in this fiddle: https://jsfiddle.net/z4t2sud3/3/

Another option is to use single quotes ' for strings inside the popup. This option is also in the fiddle and it works properly.

But what if I want to nest deeper? For example, the HTML that I insert into the data-content could contain popovers, too. While this seems like a very bad design idea, it would be nice to make it work.

Here is a fiddle for the double-nested popover: https://jsfiddle.net/cwz3sayj/3/

Answer 1

Hoping the snippet below looks like what you wanted, you can pass an option while creating a popover instance where you set the content that will be showed when the instance is clicked. Since the first level isn't present in the DOM when you first run the script, you have to activate the second popover after the first one has been clicked. Using template literals, you can use either apostrophe or quotation mark in the html code you're writing.

$('#firstPopover')
    .popover({
        html: true,
        content: `<button id="secondPopover" class="btn">
                      Goto second level
                  </button>`
    })
    .on('shown.bs.popover', function() {
        $('#secondPopover').popover({
            html: true,
            content: `This is the last level`
        });
    });

<br />
<button id="firstPopover" data-html="true" class="btn">
  Goto first level
</button>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

The only problem is see right now is when the first layer is closed before the second one.