Question

I want to use the jQuery based tooltip, qTip2 to provide a code snippet so that users can copy code that embeds my site in their site. I just want to provide the code, but I can’t figure out how to make qTip2 not render the html. The following code results in the website appearing as an iframe in the tooltip (which is pretty cool but not what I want!).

$('.myclass').qtip({
    content: {
        text: $('<pre><code><iframe src="http://mysite.com/" style="width: 100%; height: 700px"></iframe></<code></pre>')
    },
    position: {
           my: 'bottom center',
           at: 'top center'
        }
});

I’ve tried using <pre> and <!-- ,,, -->. <pre> does not work (site still appears) and <!-- --> breaks the tooltip. I’ve also tried text: '<iframe> ... ' leaving the $(' piece out. How can I disable this code from being rendered?

Answer 1

Maybe try something like this?

$('.myclass').qtip({
    content: {
        text: '<pre>&lt;iframe src=&quot;http://mysite.com/&quot; style=&quot;width: 100%; height: 700px&quot;&gt;&lt;/iframe&gt;</pre>')
    },
    position: {
       my: 'bottom center',
       at: 'top center'
    }
});

I’m not sure if qTip will try to escape the <pre> part into <pre%gt; too. I’ll delete my answer if that ends up being the case!

See Escaping HTML strings with jQuery for more info.