Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Javascript help needed (mulitline tooltips!)

blizeHblizeH ✭✭
edited October 2006 in Vanilla 1.0 Help
Hi there chaps, apologies for posting this here, but I'm under the impression there are plenty of JS whizkids on this site so here seems like a good place to ask! :-)

I'm trying to get a multiline tooltip effect but I'm not having much luck. I've tried quite a few, but eventually opted for this one, I managed to get it working just fine, but needed to change it so it would display at the position of the mouse cursor instead of a set position, and, err, it didn't go too well! :-) I've never used Javascript before but tried to implement the code at the bottom of this page with the existing code and I didn't have a lot of luck. Would anyone be able to help me set up these tooltips correctly please?



  • Have a look at this:
  • edited October 2006
    Adding the js files as it describes you can use the popuptrigger method. simply add a link (trigger for mouse-over) aaand add a logical division to display (like regular html) hover <a href="#tooltipOne" class="tooltipTrigger" id="tooltipTriggerOne">here</a> for the tooltip popup. <div id="tooltipTriggerOnePopUp"> blah blah. add formatted text or images etc here to be displayed on mouse-over of the trigger above </div> This is an excessive method but its extremely easy to implement. which im guessing is what you need. oh and its flexable (text, formatting, images and so on)
  • I am guessing you want the tooltips for when you mouse-over something on the map?

    Why not use something like the notes on Flickr images? Those are cool. I believe you can get it down without JS, just using CSS/XHTML.

    ...but I could be way off.
  • @ redux; thanks for the link, have tried those already and didn't have much luck! ;( Regarding your second post, well, I've never done any js before so I'm afraid a lot of it went straight over my head, I am /really/ dumb when it comes to these sorts of things!

    @ Krak; once again, thanks, but I've tried those too and they aren't really viable becuase the areas on the image aren't a perfect square, but yeah, the way Flickr do theirs is very nice and would of been great, just not really viable at all ;(

    Ideally I need a way to implement that one piece of code I mentioned in the first post (simply because out of 7/8 tooltips I've tried, it's the only one that's even come close to working with the imagemap properly, I just need to find a way to properly implement that mouse position thing mentioned in my /other/ post to get it positioned to the mouse and not a set position ;(
  • take a look at this: Multiline tooltips with fade effect, images and image maps support.
  • That is utterly fantastic, I've been looking for hours now over a span of a few days, trying to find something exactly like that, thank you so much, it's perfect!
  • Hey thats pretty sweet.
  • Hmm, seems perfect, but the titles are screwing up in IE, am I doing something wrong?
  • Rather annoyingly it seems to be a conflict with the imagemap; roll over plot 2, and then rollover the 'test' thing at the moment, they both have identical title code, and yet only the imagemap one is broken :(
  • Sorry to bump this but I'm really getting rather desperate now and their forum's incredibly inactive.

    There was a bug whereby the header tag was being displayed as a standard thing in image maps in IE, so I used the fix as described on this topic but now it simply isn't working at all.

    I'm completely at a loss but really need to get this sorted asap, any help would be much appreciated, cheers!
  • you don't have flash by chance, do you?

    it'd be a breeze to get what you want working with flash.
  • Really want to refrain from using flash where possible, but thanks anyway :-)
  • edited October 2006
    Westcor shopping malls does exactly what u want to do and does it beautifully. But its all in flash.

    I believe u can do all of that using Fireworks or Imageready.
    the way u do it is open up the image on Fireworks. Define Hotspots, have each hotspot and onmouse over behaviour. put anything u want. and than ask fireworks to generate the code. It should be damn easy to do.
  • Personally I don't like the tool-tip concept for web pages but needed something for this site.
    Get the script here.
    It's pretty simple to set up.
  • i think blizeh problem is that his blocks are orientated in different directions. Its just not a simple tooltip to add. he will have to use fireworks and create slices for them
  • Thanks for the replies guys, whilst both of those solutions do indeed look great, I've sort of got my heart set on using this now (not to mention used it on a load of other pages so it'd be a nightmare to use another) but there's just the two niggles I still have; one being the double header error in IE on image maps, and the other being the formatting of the text and lack of padding in FF. No idea how to fix it though :(
  • Here's another solution if you are using WP.
  • I'm afraid I'm quite intent on using swazz now because it's so lightweight and simple, it just seems perfect apart from that one darned bug! :-)

    Don't know if this is anything to work on, but someone posted this code onto the swazz forum, but I'm not having any luck at all implementing it :(
  • edited October 2006
    Did you make sure the src is pointing to the js file? Sometimes, I've had to put in the complete path to the file.
  • Yup, deifnately the right js file, I just borked it by trying to incorporate the code in the post two above this :-)
This discussion has been closed.