SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Custom Cursor Overlaps Link Title/Tooltip in Firefox

    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:
    Code:
    html, body, a
    {
        cursor:url('http://www.ddcomputer.com.au/images/parts/KEYBOARD/910-002281_A.jpg'), pointer;
    }
    And the HTML:
    Code:
    <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. #2
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a screenshot just in case anyone doesn't have Firefox ( ) or some kind of multi-browser installed.

    tooltip.jpg

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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. #4
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •