escaping double and single quotes in jquery tooltip

Question

Hello,

I am using a dynamic jquery carousel to show thumbnail images in the home page....The carousel is working fine...and i want to add a tooltip to each image....for this i am using jquery tooltip....on hover tooltip should display the original image,uploaded by and so on...

The javascript that adds the tooltip to each image is as follows...

 function mycarousel_getItemHTML(url)
{
var url= url.split(",");
 return '<a href="'+url[4]+'"  onmouseover="Tip(\'<img src=\''+url[5]+'\'></img><br/><b>'+url[1]+'</b><br />Category:'+url[6]+'<br/>Views:'+url[2]+'<br/>Uploaded by:'+url[3]+'\')" onmouseout="UnTip()"><img src="' + url[0] + '" width="75" height="75" alt="" /></a>';
};


url[5]=original img src
url[1]=title
url[6]=category name
url[2]=no of views
url[3]=uploaded by
url[0]=thumbnail img source

the above javascript gives me the following error

missing ) after argument list

how can i escape single and double quote properly...Please help me...-

Answer 1

I think the onmouseover portion is wrong, and you want:

onmouseover="Tip(\'<img src=\\\''+url[5]+'\\\' /><br/><b>'+url[1]+'</b><br />Category:'+url[6]+'<br/>Views:'+url[2]+'<br/>Uploaded by:'+url[3]+'\')"

Let me know if that doesn't work - my head's hurting from trying to be a JavaScript interpreter. I think that's on the right lines though.

p.s. I fixed your <img> tag - I think in general <img> tags should be self-closing <img... />, not <img...></img>.

Answer 2

Assuming the HTML " entity gets interpreted properly (and reformatting so people can see what's going on.):

function mycarousel_getItemHTML(url)
{
  var url= url.split(",");
  // wrapping attributes in double-quotes, so use double-quote
  // entity within attribute values:
  return '<a href="' + url[4] + '" ' +
      'onmouseover="Tip(\'<img src=&quot;' + url[5]+'&quot;/><br/>' +
      '<b>' + url[1] + '</b><br />' +
      'Category:' + url[6] + '<br/>' +
      'Views:' + url[2] + '<br/>' +
      'Uploaded by:' + url[3] + '\')" ' +
      'onmouseout="UnTip()">';
};

Note: you should probably entity-encode all the < to < inside the onmouseover attribute too. That might leave less scope for browsers to bork the tooltip