Trying to get tool tips to work in Safari

JavaScript
1

I am using javascript from wz_tooltips from WalterZorn. The tool tips work fine in FireFox and Internet Explorer but they do not work at all in Safari.

The script on the Walter Zorn web site work in Safari so I’m really perplexed why I can’t get it to work.

Any help would be greatly appreciated

My page is atgroundlevel/facts-nutrition/

Thanks!

Scott Jay

2

I use CSS tooltips and they work fine with Safari - why use Javascript?

What is your website URL?

.

3

My page is: atgroundlevel.ca/facts-nutrition/ (oops, forgot the “.ca” in my initial post)

I’ll have to check into CSS tool tips and how they are made. I like this one because I could add images and text into the tool tip.

Thanks!

Scott

4

If you would like an example of how to code a CSS tooltip, let me know. You can put images in them.

However they will appear on :hover and can appear on :focus. Safari and Chrome do not keep the :focus on something after it’s been clicked, though (the other browsers do) so if you need the tooltip to remain onscreen in ALL browsers AFTER it’s been clicked then you will want Javascript tooltips instead of CSS ones.

*edit I took a look at the Zorn JS… omigawd. That’s a LOT of code just for a wee lil’ tooltip.

Best thing to do maybe is load both your copy of the JS and his copy in a program like vi that can show diffs (whatever’s different between the two) to make sure some error wasn’t made in copying over.

Next thing would be to check your page versus his… whatever elements are getting the tooltips may need exactly the same names.

  • If you comment out your <links> to the CSS files, does it work (this makes sure CSS isn’t somehow interfering).

  • If you comment out all your other scripts you’re calling, does it work (this makes sure your other JS aren’t somehow interfering).

That’s how I’d try to track down the problem.

In fact I’d do the commenting out of JS and CSS first, because Walter Zorn’s page will not have your other CSS or scripts, so that’s an obvious first-place to try looking around. Since each browser has its own Javascript Engine, it can very well be some collision between scripts or something that simply doesn’t affect the other browsers but is toxic for Safari/Chrome.

5

Thanks for this! I’ll muck around with it some more today and investigate the CSS tooltips.

Do CSS tooltips stay on screen when you hover over the link like the one I’m using. I have tried others but they disappear after a few seconds.

Thanks again!

Scott

6

Here are my toooltips that stay on only when hovered but they still work in Safari and Chrome after they have been clicked


// CSS file
.jtooltip a{position:relative;background:transparent none;color:#0f0}    /* set stacking context -*/
.bg2 a {background:transparent none;color:#fd0;color:#ff0}    /* set stacking context */
.jtooltip a span{
    visibility:hidden;/* hide message initially*/
    position:absolute;
    top:20px;left:2px;width:255px;padding:5px;
    background:#fe0;color:#00f; border:2px inset #090;
    font-size:0.88em; text-decoration:none; line-height:1.6em;
}
.jtooltip a:hover, 
.jtooltip a:hover span {visibility:visible;z-index:2;text-align:left} /* ie bug needed to make span show*/

// HTML file
<div class='jqtooltip'>
	<ul>  
		<li>
		        <a href='<?php echo base_url();?>joke/of_the_day/A_cat_named_Jesus/1654' id='joke_of_the_day'> 
				<img src='/afiles/logo/joke-of-the-day.jpg' style='width:222px; height:42px; margin:10px 0 0' />
				<span>A picture of a cat named Jesus?</span>
			</a>	
		</li>			
		<li class='bg2'>
			<a href='<?php echo base_url();?>top-10-jokes'> 
				Top 10 Jokes
				<span><?php echo $z_title[1]?></span>
			</a>
		</li>
      </ul>
</div>

.

7

Do CSS tooltips stay on screen when you hover over the link like the one I’m using. I have tried others but they disappear after a few seconds.

CSS tooltips remain onscreen so long as the parent is getting hovered (and also remain onscreen after a “click” if :focus is used, except in Saffy-chrome who don’t keep focus on clicked items).

The one that disappears after a while is the default one from the browser which normally is the element’s “title” attribute (except in IE, where alt attributes also show (incorrectly)).

CSS tooltips can be styled any way you want as well and can have images.

8

Thanks! However I did get the javascript to work in Safari. It was a problem with using the formatting tags <center> and <br>. I removed the <center> tag and replaced the <br> tags with a transparent image. It works perfectly now.

One of the reasons I like to use the javacript solution is the control and flexibility I have over how the tooltip displays.

Thanks!

Scott

9

<center> tags? tsk tsk… : )

10

Ha! I know. Old school.

Thanks for reminding me.