Search code examples
jqueryunicodecharacter-encodingcross-browsertooltip

My HTML Element Has a Chinese Title. Can jQuery Help Me Render the Tooltip Correctly in the Browser?

Here is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
<a href="www.cnn.com" title="甲骨文">A link with a Chinese title</a>
</body>
</html>
  • If you hover over the link in Firefox, the Chinese characters are correctly displayed in the tooltip.
  • However, if you hover over the link in IE8, Google Chrome, or Safari, three blocks are displayed.

My Question:

Can jQuery help me override the default browser 'title' tooltip behavior and correctly display the Chinese characters?

Solution

  • There are many JavaScript-tooltip scripts available, as jQuery plugins or otherwise. They are typically meant for including images or other hypertextual content, but would have the side-effect of using browser fonts instead of the OS UI font for tooltips in IE.

    However, I wouldn't resort to JavaScript tooltips just for that. The desktop of a Chinese user will certainly have a working Chinese OS font installed so the tooltip will work fine there. If it does not, it is quite unlikely that there will be a Chinese font available to browser document content. Especially on IE, which traditionally has a poorer browser-font-fallback mechanism than Firefox. (Can IE even render in-page Chinese content on your machine?)