How do I encode html for Bootstrap popover and tooltip content

Question

This may be a duplicate; it's hard to tell because the key words contain "html" and "content" and even Bing and Google were returning a lot of false positives.

Bootstrap tooltips and popovers support html values for the data-content attribute when data-html=true. However, this isn't valid

<input id="email" class="form-control" type="email" 
  data-bind="value: Email, valueUpdate: 'afterkeydown'" 
  data-container="body" data-toggle="popover" data-placement="bottom"
  data-title="Email" data-html="true"
  data-content="<p>This is <i>your</i> email address.</p>" />

because you can't just put html in the value of an attribute that is itself HTML. It may confuse the parser and is not permitted by the HTML specification.

While it seems to work with Internet Explorer, I really don't feel like testing with fifty different browsers and versions. It certainly does confuse the parser in the Visual Studio 2013 HTML editor. That editor thinks there's no closing quote.

I could dodge this by assigning the attribute from JavaScript in a separate file, but that's clumsy and defeats the separation of concerns.

So, what's the right way to mark this up?

Answer 1

As the accepted answer points out, you can't have a quote " inside a string quoted with ". This problem occurs often. If you want to display text that looks like HTML, then how is the browser supposed to know what it should parse as HTML and what it should simply display.

For example, how do you get a browser to display the text <p></p>

The answer is escaping. Instead of characters like " and <, you use placeholders like " and <

However, the solution of escaping the quotes doesn't work here. Precisely because the browser will not parse it as HTML. If you put escaped quotes in your html, they don't look like quotes to the browser, they look like text.

There is a different solution however: A string that is quoted with " can contain ' without problems. The following is valid:

data-content="<div id='string_in_string' ></div>"

This can be applied to your bootstrap popovers, I've set up a fiddle, it shows how the single quote strings are correctly parsed, while the escaped strings confuse the browser: https://jsfiddle.net/z4t2sud3/3/

This is the code inside the fiddle (the fiddle environment automatically imports bootstrap, jquery, etc)

<mark data-content="
    <button class=&quot;btnr&quot; type=&quot;button&quot;>
        Doesn't work
    </button>

    <button class='btn btn-info' type='button'>
        Works
    </button>
    " data-html="true" data-toggle="popover">
    Popovered
</mark>

And be sure to activate the popover via Javascript:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Answer 2

You can add whatever you want to an HTML attribute as long as it is a valid html attribute value. What is a valid attribute value? What does not contains tags, quotes and so on. So.... and what? The solution is: Scape the string before append it inside the html attribute.

If you are using PHP: http://fi2.php.net/htmlspecialchars Or Twig: http://twig.sensiolabs.org/doc/filters/escape.html

If you are using jquery, when you do $el.data('my_scaped_json) will be converted to whatever it was originally, such a json object or html-string: $( $el.data('my_scaped_html) );