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>