Custom Cursor Overlaps Link Title/Tooltip in Firefox

HTML & CSS
1

Hello all,

I’m experimenting with custom cursors by trying to use a picture. However, in Firefox, when you hover over a link, instead of the link title/tooltip appearing below my custom cursor, it appears in the exact same position that it would have appeared with the default pointer cursor–which in my case, since my picture is taller than the default pointer cursor, means that the tooltip is below my custom cursor.

Here is the fiddle.

Or if you prefer the CSS:

html, body, a
{
    cursor:url('http://www.ddcomputer.com.au/images/parts/KEYBOARD/910-002281_A.jpg'), pointer;
}

And the HTML:

<html>
    <body>
        Hello
        <a href="#" title="This is an example title">Link</a>
    </body>
</html>

I am having this problem in Firefox, but in Chrome it is displaying fine just the way it should. I don’t know if this is only an old bug or if I am doing something wrong.

Will I have to make an entirely new “tooltip” element just so I can make the title/tooltip display normally, or is there some simple fix that I am missing here?

Thanks!

  • Pam
2

Here is a screenshot just in case anyone doesn’t have Firefox ( :eek: ) or some kind of multi-browser installed.

3

Happens in all browsers for me. It might be better to remove the title attribute and use a span instead, which you can then control and style as you please.

I would also make the image edges transparent.

4

Thanks Ralph! Using a span is much more clean and efficient than making an entirely new element. I keep underestimating the wide usage of spans. And I’ll be certain to take out the white edges and make the picture a .png.

Thanks!