hint.css hint.css does not work well with prettify.js on Firefox

I am using hint.css in combination with prettify http://code.google.com/p/google-code-prettify/

On Chrome/Safari the tooltips look normal, on Firefox, the combination with prettify.js yields strange results - the arrow is mangled or does not appear and the second/third letter of the tooltip are only semi-visible.

screen shot 2013-07-05 at 11 34 59 am

toy example code:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="run_prettify.js"></script>
<link rel="stylesheet" href="hint.css"></link>
</head>
<body>
    <pre class="prettyprint" style="border:0px">
        <code class="language-xml">
 &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot; ?&gt;
 &lt;book&gt;
    &lt;page&gt;1&lt;/page&gt;<nocode><a style="max-width:50px;" class="hint--top hint--always" data-hint="Tooltip text."></a></nocode>
    &lt;page&gt;2&lt;/page&gt;
    &lt;page&gt;3&lt;/page&gt;<nocode><a style="max-width:50px;" class="hint--right hint--always" data-hint="Tooltip text."></a></nocode> 
&lt;/book&gt;
        </code>
    </pre>
</body>
</html>

Jul 05 '13 09:07 chauff

@charlotteHase If we can have a small demo on CSSDeck or JSBin depicting the issue, that would be great.

Jul 05 '13 19:07 chinchang

http://jsbin.com/akubiy/1/

Jul 05 '13 19:07 chauff