Help with code for a Tooltip

[mowrer1127]

First of all let me preface this question with I'm very new with all this stuff and if this question is stupid, I'm sorry! I am currently doing a website in Iweb which is great because I haven't really had to "learn" too much about HTML etc.

However, I have done a lot of extra things to enhance my website, but this last thing I would like to do seems like it should be the easiest, but I haven't had any luck.

I have pictures throughout my site that I've pulled from Iphoto. They do not have URL's because I never uploaded them to my server. I would LOVE when my clients put their mouse over the picture a tooltip to appear describing who is in the picture etc.

I have tried A LOT of different codes, but everytime I publish the code I have used it never works. This seems like it should be so easy, but most of the information on the web concerning tooltips is about linking images etc. I don't want it to be a link I just want to assign some text to the image in the form of a tooltip and I guess because I don't have a URL for the picture (which is what most tooltip code is calling for) I'm at a complete loss.

I'm hoping someone would be kind enough to provide me this code or point me to where I can find it. This is the last step for me and I really, really want to use this because my clients will love it (I own a doggie daycare and want all the pics I have posted throughout my site to say which dogs are playing and with whom).

Thank you in advance for taking the time to read this and hopefully helping me out.

Sincerely,

Nicky

[jscheuer1]

The simplest tooltip is the title attribute. Give your image one:

<img src="bill_and_ted_empire.jpg" alt="Bill and Ted" title="Bill and Ted on the Empire State Building">

Other than that, there are tooltip scripts. Some do not require links. Here's some (they can key off of links or just about anything, including plain images):

http://www.dynamicdrive.com/dynamici...ckytooltip.htm

http://www.dynamicdrive.com/dynamici...tmltooltip.htm

http://www.dynamicdrive.com/dynamici...mltooltip2.htm

Others in their parent index:

http://www.dynamicdrive.com/dynamicindex5/

can do this as well, though some perhaps cannot. You can't tell in some cases until you try them out. But the ones that show them with tips to anything other than a link right on the demo page, like the ones I specifically mentioned, obviously can.

[mowrer1127]

John,

Thank you so much for your response. I tried your code, substituting the text to correspond with what I wanted:

<img src="image1.jpg" alt="Duke and Mason" title="Duke and Mason telling secrets.">

I use a program called MassReplaceIt so I placed a text box around the corresponding picture and applied the above code to that text box. After publishing my changes to my server I viewed my site in Safari and have a small narrow box with a blue question mark in the middle of it. When I place my mouse over the blue question mark I do get a tooltip which says Duke and Mason telling secrets, but obviously I don't want the box with the question mark and I wanted the entire picture to act as the tooltip. Per MassReplaceIt, the size of the text box I created (which is the same size as the picture it corresponds to) should have made the tooltip "area" as big as the picture. (Firefox doesn't show this box or question mark, but doesn't display the tooltip at all either).

Sigh...not sure why this didn't work. Any thoughts?

Also, I looked (and liked) the Cool DHMTL tips, however, I played around with it on IWeb using a HTML widget and couldn't get it to work. Might be a little advanced for me.

Nicky

[jscheuer1]

The question mark means that your image isn't on the server, or that if it is there, the upper and lower case letters used to locate it in your code do not agree with those of the actual filename and/or path to the image on the server. Upper and lower case letters almost always matter on the web, and almost never on the local machine.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[mowrer1127]

John,

So if I use the URL of the pictures I want to use, then it will replace the photo from my server where I have created the text box for MassReplaceIt along with the tooltip. Trying to do it now, but having trouble uploading my Site to my server.

If this is the case, this is kind of what I wanted to stay away from. I'm sure you're familiar with IWeb, but it has a neat feature with photos called Masking. I can drag the photo in from IPhoto then "position" it with the Mask feature. Kind of like cropping it, but I can do it with whatever graphic I have around the picture (frames, lines etc) and really position the photo where I want it.

If I pull the picture from my server, then I will lose the cropped picture that I've put it in my site through IWeb. Does that make sense? I was hoping NOT to do this, but it's looking like if I want a tooltip, then I have to do it this way. Sound right?

As soon as I get my Site back up...I've experimented with one of the photos and above code to see if what I'm thinking will happen actually happens...I will let you know.

I guess my last question is the one I kind of asked above...Will the photo be replaced from the photo I have uploaded to my server when I apply this code? And is this the only way I can get the tooltip to work, by pulling photos from my server?

Thanks a bunch for all you have provided me so far! It's much appreciated.

Nicky

[mowrer1127]

So I did what you said and that's exactly what happened. The picture was pulled was from my server and placed on my site and I just now realized I uploaded my pics in the largest size possible and the pic takes up half my screen. LOL.

Oh well...I'm thinking about giving the sticky tooltip a try. That is a real neat feature and I like the look of it.

I'm going to get that picture off of my site but my the link to my page is:

broken link removed Viewing it in IE 7 or 8 is a mess, but Safari and Firefox are great.

Nicky

[jscheuer1]

That link to your page was a 404 not found. But it doesn't matter. I only need the link if you are having trouble with something. Right now it sounds like you have the picture showing, it just needs to be resized.

If you try out the script and need help, a link to the page would be good at that point.

[mowrer1127]

John,

So here's what I did...I put this code in the head of my page...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="stickytooltip.js">

/***********************************************
* Sticky Tooltip script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<link rel="stylesheet" type="text/css" href="stickytooltip.css" /></head>

Then I placed a textbox with a reference of Sticky1 for MassReplaceIt and replaced it with this code:

<p>Some page contents here...</p>

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="http://98.130.86.82/Images/Mason_and_Duke.jpg" /><br />
Duke telling Mason secrets.</div></div>

<div class="stickystatus"></div>
</div>

I first used the example of red leaves: <div id="sticky3" class="atip">
<img src="http://img339.imageshack.us/img339/2488/redleaveslarge.jpg" />
</div> but it just pulled my picture in from the server and it was HUGE and covered up the whole right side of my website....From the material I read I thought this is what I was to do...so I tried again and used the example code for Thailand: <div id="sticky1" class="atip" style="width:200px">
<img src="http://img121.imageshack.us/img121/746/thailand.jpg" /><br />
Thailand boasts some of the most popular and luxurious resorts in Asia.
</div> thinking I could use the box I created for MassReplaceIt as the "link" per se.

Well, my website is now a complete mess. I only applied this code to the home page, but now I've got pictures throughout my entire site not showing up, which has never been an issue. Thinking I should just scratch this whole idea, but I'll wait to hear what you have to say regarding this debacle I've created ;-)

Nicky

http://98.130.86.82/Site/Home.html

[jscheuer1]

Well:

http://98.130.86.82/Site/stickytooltip.js

is a 404 not found, But that wouldn't cause images to disappear. I think the problem you are expeiencing is due to a conflict between jQuery and one or more other scripts on your page.

If you could put jQuery and the sticky tooltip script before the other scripts in the head, that might solve it. But you would have to actually have the sticky tooltip script. Did you download it from the demo page?

Once you have the script and if you can put it and jQuery before the other scripts on the page (with jQuery coming first), and that still doesn't work, we may be able to get it to work by putting jQuery into noConflict mode:

jQuery.noConflict();

at the beginning of the sticky tooltip script.

However, if as I suspect this all sounds like Greek (or geek) to you, you will probably be better off not trying this at this time, though it probably can be worked out.

[mowrer1127]

John,

There's nothing more I like than a challenge, and I think I'm understanding what you're saying...Yes, I downloaded that file... it's just at http://98.130.86.82/stickytooltips.js.

I did notice that the 2nd part of that code was at the bottom of the page right before my stat counter which I thought was odd. I can try and re-do so that it's at the top. I did that particular code through MassReplaceIt last, so that may be the cause.

But to be honest, if I'm reading all this code (almost) correctly, it sounds like all my images have to be pulled from my server and that's not what I want to do.

I have spent countless hours searching for a way to just make a tooltip on an image placed on my site that does not have a URL and I've found nothing. The closest thing I've found is the text box that isn't a link and a tooltip pops up that says "This DIV has a tip!!" located at http://www.dynamicdrive.com/dynamici...tmltooltip.htm It's the grey text box in the demo section (3rd one down). That's what I want to do, but instead of the text box, I want to use one of my pictures. AGHHHHH. This has to be possible, in my simple mind anyway. Maybe not??? Your thoughts?

Nicky