Topic awaiting preservation: Tooltips again (Page 1 of 1)

Is it possible to modify a script like the one below (giving author credit of course)
http://www.dynamicdrive.com/dynamicindex5/dhtmltooltip.htm
so that it can support multiple tool tips rather than just one?

please disregard the tooltips attached to text - the DIV i would like to reproduce multiple times is the one in the gray box.

thanks for any help

this is for non-commercial/personal use

When you say "multiple times", do you you mean you want more than 1 physical box appearing, or do you just want the text appearing multiple times within the same physical box?

Dan

well... multiple tool tips at the same time, or different tooltips over different regions? Both should be possible - and you might even just have different divs within the tooltip, hidding & displaying them as neccessary....

so long,

->Tyberius Prime

I would like different tooltips to appear over different regions of an image when rolled-over (a screenshot).

I don't want to use an imagemap and the ALT to show text - given the text disappears and the ALT does not support many formatting options.

thx

Why not have many different DIVs over the top of the image, and have a different tooltip attached to each DIV? That way, you don't need to modify his code at all

Dan

Prob is I don't know how to modify the code. Right now the code is specific to the one div.

I did this for a help page once, don't have access to the code, but basically I created an imagemap on top of the image, then onclick I triggered the visibility of a div holding the appropriate text by it's id.

Worked fine and was very simple to make.
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

quote:

---

I don't know how to modify the code. Right now the code is specific to the one div.

---

I know - which is why I'm suggestion you have multiple DIVs. That way, you don't need to understand, or edit, his tooltip code. You'd have multiple DIVs on the page, each with their own tooltip. Then you can just position those DIVs over the top of your screenshot image.

Dan

If you look at the code you will see it is hardcoded:
example

var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById?

where dhtmltooltip is a div
obviously i could recreate the code for each div. for example, if i have twelve tooltips I would have 12 divs and I would multiply all the lines of code by 12...that would work fine but it would be completely retarded.

what i would like to do is make the code generic so that each div's ID could be passed to one function - I could do this easily in VB but do not have the knowledge of JS to modify the code.

I have found an alternative way of doing it but it's very code intensive and is based on modifications of this script:
http://www.dyn-web.com/dhtml/tooltips/roll-tip.html

There has to be a simpler method but I can live with the one above. thanks to all for their help.

Um if you just read the instructions, for every mouseover you can specify different text, background color and width. Considering that You can use just one div and it will look different for every tip.

Not sure why you're not just doing that.



.:[ Never resist a perfect moment ]:.

quote:

---

bitdamaged said:
Um if you just read the instructions

---

That's exactly what i'm doing with the last link.

The problem was with the first link I posted.

edit: in passing, i can't use just one div given i am mousing-over an image. different regions of the image will give different tooltips.

(Edited by Shooting_Star on 07-22-2004 02:44)

I was talking about the first. Look at how you define the mouseover's

<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";

 onMouseout="hideddrivetip()">Search Engine</a>



<DIV onMouseover="ddrivetip('This DIV has a tip!', '#EFEFEF')";

 onMouseout="hideddrivetip()">Some text here. Some text here.</div>



<a href="http://yahoo.com" onMouseover="ddrivetip('Yahoo\'s Site', 'yellow', 250)";

 onMouseout="hideddrivetip()">Yahoo</a>

You don't have to use more than one mouseover div.



.:[ Never resist a perfect moment ]:.

I guess made this pretty confusing. Let me explain what i'm trying to do.
I have screenshots of an app which will be placed in a table in an html doc.
I would like the user to be able to scroll over the screenshot image and depending on the region of the screenshot a different tooltip will appear to explain a function or whatever.

So imagine a classic html imagemap but instead of using ALT to display text (which disappears) I want to use DHTML to keep the tooltip visible and to have more formatting options.

The above example uses mouseover links. what i'm trying to do is to rollover a certain area of the "imagemap" and have the tooltip appear. this means i need divs to create "hotspots" which will trigger the tooltips.

in essence, i am trying to create a hybrid between a classic imagemap and a dhtml tooltip. does that make any sense?

thanks

Here's an idea of what i'm trying to accomplish:
http://www.milonic.com/menusample4.php

except i want it entirely client side and I only need tooltips , not menus.

***bangs head on wall***

You mean like this?

All just with the code you provided above.



.:[ Never resist a perfect moment ]:.

That's exactly what I've been trying to explain - glad you went the extra mile and showed how it could be done

Dan

Walter Zorn has a great set of js code snippets, include a very feature rich example of tooltips:

http://www.walterzorn.com/tooltip/tooltip_e.htm

--- RPG Fan ---

BillyRayPreachersSon:
don't take this the wrong way but your advice was exactly like the one Microsoft gives...totally accurate and totally useless for a DHTML noob like myself.

Bitdamaged:
That's exactly it. THANKS.

What was obvious to you, and still isn't to me, is the relationship between the div1, div2, and div3 and the div called "dhtmltooltip". that's why i stopped exploring the code. i thought the code would have to be repeated ad nauseum for each div. I still don't get it and won't unless:
a) I learn DHTML (which would be a waste of time for me as I do not code for a living)
b) You kindly explain it to me.

either way, once again BD...thank you very much for taking the time and patience.
thanks to everyone else for suggestions and links (to add to the dozens i found thru google)

The "dhtmltooltip" div is simply a container, for the purposes of this script you don't need to worry about it, all it needs it gets from the call to ddrivetip()

Now div1, div2, div3 each have their own onMouseOver events which call the ddrivetip() function.

<div id="div1" onMouseover="ddrivetip('This is Tooltip 1!', '#EFEFEF')" onMouseout="hideddrivetip()">Tooltip 1</div>

<div id="div2" onMouseover="ddrivetip('This is Tooltip 2!', '#EFEFEF')" onMouseout="hideddrivetip()">Tooltip2</div>

<div id="div3" onMouseover="ddrivetip('This is Tooltip 3!', '#EFEFEF')" onMouseout="hideddrivetip()">Tooltip3</div>

The point being once you cut and paste the code all you need is to put your divs on the page and place them with CSS (at least that's how I did it). Then change the text in the first part (and if you want too the color and width)



.:[ Never resist a perfect moment ]:.

Yeah, I figured dhtmltooltip was the container for the other divs...but how does the browser know that?
is it this line?

document.getElementById("dhtmltooltip")

i assume the order of the divs is not important? i.e. dhtmltooltip is the first div described in the document outside of the style section.

thanks again

To enhance the effect I removed the 4 borders to each DIV and replaced them with an image:

<DIV id=div2 onmouseover="ddrivetip('This is Tooltip 2!', '#EFEFEF')" 

onmouseout=hideddrivetip()><img src='z.gif' width="40" height="38"></DIV>

Looks very good.

Is there any way to force a carriage return (i.e. code it) or just type and let it wrap?

edit: i mean to break the tooltip text that is.

(Edited by Shooting_Star on 07-24-2004 00:22)

The width of the tooltip div is set to 150px, text should wrap at that point. To force it you can stick HTML break or paragraph tags in the text.



.:[ Never resist a perfect moment ]:.