2

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?

djq
  • 14,810
  • 45
  • 122
  • 157

1 Answers1

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 &lt;pre%gt; too. I'll delete my answer if that ends up being the case!

See Escaping HTML strings with jQuery for more info.

Community
  • 1
  • 1
Chris Peters
  • 17,918
  • 6
  • 49
  • 65
  • This may be slightly more readable too if you want to give it a try: `text: $("pre").text('')`. Not sure if it works, but if it does, I could change my answer to reflect it instead. – Chris Peters Aug 19 '12 at 23:08
  • Do you find it to be more readable? Enough to where it would be worth updating the answer? – Chris Peters Aug 20 '12 at 00:34