How Do I Encode Html For Bootstrap Popover And Tooltip Content

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 a

Solution 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)

<markdata-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()
})

Solution 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) );