Javascript help needed (mulitline tooltips!)

blizeH

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?

Thanks!

redux

Have a look at this: http://static.twoday.net/matsblog/stuff/Tooltip/Tooltip.Demo.html

redux

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)

Krak

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.

blizeH

@ 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 ;(

Jawi

take a look at this: http://boxover.swazz.org/ Multiline tooltips with fade effect, images and image maps support.

blizeH

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!

Krak

Hey thats pretty sweet.

blizeH

http://www.kwbell.co.uk/new/dev/potters/plans.php Hmm, seems perfect, but the titles are screwing up in IE, am I doing something wrong?

blizeH

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 :(

blizeH

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!

a_j

you don't have flash by chance, do you?

it'd be a breeze to get what you want working with flash.

blizeH

Really want to refrain from using flash where possible, but thanks anyway :-)

MySchizoBuddy

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.

Wanderer

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.

MySchizoBuddy

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

blizeH

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

jimw

Here's another solution if you are using WP.

blizeH

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

jimw

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.

blizeH

Yup, deifnately the right js file, I just borked it by trying to incorporate the code in the post two above this :-)