In html / asp.net-mvc, what is the correct way to include an apostrophe inside an image tooltip

Question

If i have an image tooltip that is being populated from a database table. I am generating this html below from my server side C# code

  public string GetImage()
 {
  return "<img class='iconSpace' title ='" + dataIssue + "' src='/Content/Images/Icons" + size + "/information_red.png' />";
}

the issue is that if the variable dataIssue has an apostrophe in it, it only shows the characters in the string up to that point.

What is the best way to show the whole string in the tooltip given the code above?

Answer 1

' is not special symbol for HTML, and browser shows whole string without problems, but you can have problems with following symbols " < > & they should be escaped as:

"
<
>
&

if your browser treats HTML standard incorrectly and cut the rest of the string, you can try to escape single quote with ' - this will work for all browsers

so, according HTML standard attribute values should be surrounded by " symbol, not by ', so the problem here should be solved:

dataIssue = any_kind_of_html_escape_function_here(dataIssue);
return "<img class=\"iconSpace\" title=\"" + dataIssue + "\" src=\"/Content/Images/Icons" + size + "/information_red.png\" />";

For asp.net htmlencode function is defined here: http://msdn.microsoft.com/en-us/library/w3te6wfz.aspx

Answer 2

Would this work for you?

string img = "<img class=\"iconSpac\" title=\"" + dataIssue + "\" " + "scr=\"/Content/Images/Icons\"" + size + "/information_red.png\" />";

Answer 3

You should use HttpUtility.HtmlEncode("...") for it.

http://msdn.microsoft.com/en-us/library/73z22y6h.aspx