Third level of quote escaping in HTML and JavaScript

Question

I'm going to preface this with: "I know this is bad practice and an ugly hack (and I'm sorry) but..."

I'm using jQuery TOOL's tooltip widget to display a tooltip on an html element when the user hovers over it. With this widget you add the tooltip's html to the element's title attribute.

Inside of that html I have an element onto which I want to bind an inline onclick event handler.

Unfortunately I've run into too many layers of quotes to pass a parameter to the function I'm trying to call.

I have something like this:

<div title="<div onclick='myFunction(_____)'>My tooltip content</div>">My element</div>

This works if I need to pass an integer to myFunction since it doesn't need another set of quotes. Unfortunately I want to pass a string to myFunction. How can I further escape this string parameter so that it doesn't close the onclick or the title string?

Answer 1

Inside of HTML attributes, you should encode quotes as HTML entities, e.g.:

<div title="This says &quot;Hello!&quot;">
    Hello!
</div>

Answer 2

I was able to find a solution to my particular problem. Not sure if this works in the general case or if jQuery TOOLs is doing something magical to unescape my string but I ended up escaping with " and it did evaluate into valid Javascript that was executed.

Something like this:

<div title="<div onclick='myFunction(&quot;_____&quot;)'>My tooltip content</div>">My element</div>

I don't really understand how this is working to be honest. Would love if someone could clarify what part of the process is changing those "s into actual functional quotes.