SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Location
    England
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a complicated 'tooltip'

    Hiya,

    I've been seeking a solution to a request that's come up a few times with clients now, and have been forced to offer them an alternative.

    Basically, what's been requested is similar to a tooltip: it appears when you hover over something, and it follows the mouse cursor within the confines of that area. Sounds like any tooltip script, right? Indeed, I've found loads of them.

    The problem is that they want a relatively complicated assortment of HTML in the tooltip, which I've produced. At the moment this sits as <divs> on the page, hidden with 'display: none;'. I've come up with a way of making them appear in a pre-defined location upon hover, but not in a way that follows the cursor.

    Can anyone think of a standards-compliant tooltip script that either does or can be easily bent to accommodate full-blown HTML, rather than simply a line or two of text as most allow (typically defined in the 'onmouseover' itself, which is no good for search engines)?

    The best solution of all would be for it to literally take my hidden <div> and apply it to the cursor, but I can't hard code this into the script itself as there're multiple instances of them on the same page.

    Hopefully someone can at least put me on the right track, because Google isn't really helping me cut through the abundance of generic tooltip scripts out there which all accomplish pretty much the same thing.

  2. #2
    Non-Member
    Join Date
    Jul 2005
    Posts
    606
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a tooltip plugin for scripto that uses the title attribute on anchors, that seemed ok.

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ryan Williams View Post

    The problem is that they want a relatively complicated assortment of HTML in the tooltip, which I've produced. At the moment this sits as <divs> on the page, hidden with 'display: none;'. I've come up with a way of making them appear in a pre-defined location upon hover, but not in a way that follows the cursor.

    Can anyone think of a standards-compliant tooltip script that either does or can be easily bent to accommodate full-blown HTML, rather than simply a line or two of text as most allow
    I'm not sure exactly what you mean by 'follows the cursor'; if you mean 'appears near the cursor', try UltimaTips
    Tab-indentation is a crime against humanity.

  4. #4
    SitePoint Member
    Join Date
    Nov 2006
    Location
    England
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately not, Bob. The problem is that each tooltip could have different HTML in. One could have a paragraph and a list, another might just have the list. Or one might have two lists and a special icon. As such, I somehow need absolute control of the HTML on a per-tooltip basis.

    They're not so much tooltips, but boxes that appear when you hover over a link (specifically, they contain pricing and sometimes a little calendar). However, the client does want them to follow the cursor as in 'move with the cursor'.

    I could hack up an existing tooltip script so the tooltips it generates look how I want, but there's no way to make each tooltip contain distinct HTML. A title attribute isn't really sufficient as it cannot contain markup.

    As it stands my only solution is to have the tooltip simply show an image, which is obviously rubbish for SEO but then I could at least ensure it shows what I want each time.

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Find a tooltip script that works how you want aside from them putting the html inline in the title attribute or whatever.

    Modify the function which gets called on mousover/mouseout to accept a string id instead, which it uses to document.getElementById(arg)

    The string id will be the id of the div you want to use as the tooltips html.

    Code:
    eg instead of
    <div onMouseOver="tooltip('hey<br>there')">...
    
    
    use like
    <div id="heythere" style="display:none">hey<br>there</div>
    <div onMouseOver="tooltip('heythere')">...

  6. #6
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This one seems to both show HTML in it and follow the cursor while you are on the link:
    blog.innerewut.de/files/tooltip/demo.html


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
  •