Print Page - Need help with a tooltip (jQuery)

Public area => The Pub => Off-topic => Topic started by: MultiformeIngegno on March 30th, 2012, 05:07 PM

Title: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 05:07 PM

I need a tooltip to appear when users click on a link. Here's what I used:

<script>
jQuery('#tooltipclick').click(function(){
  jQuery('#tooltip').toggle();
});
</script>

<div id="tooltip" style="display:none">my tooltip text</div>
<a id="tooltipclick">Click me!</a>

It's working flawlessly in Firefox and Chrome but nothing happens in IE and Safari Mobile..!
Why?? Maybe ActiveX shit or similar? How can I make this working for every browser?

Help pleeease.. :sob: :sob:

Oh, here's a link to the website I'm working on (it's used for "Credits"): compagniaoltreconfine.com SLASH beta

Title: Re: Need help with a tooltip (jQuery)
Post by: Arantor on March 30th, 2012, 05:13 PM

Works in IE8, though the background's a bit broken. Really, though, if you look in IE, you'll see other JavaScript errors on the page that affect it.

Not sure offhand why it doesn't work in Safari Mobile, but I'd imagine it's related to JavaScript errors again (try turning on Developer Mode there)

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 05:31 PM

Now doesn't work even in Firefox and Chrome.. wtf..

EDIT: Ok, the script needs to be positioned after the calling <a>

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 05:36 PM

yeah, now it works even in IE & Safari! :))

The only problem is, why IE doesn't like:
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8) ?

Title: Re: Need help with a tooltip (jQuery)
Post by: Arantor on March 30th, 2012, 05:36 PM

IE 8 does not support rgba syntax.

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 05:44 PM

Damn IE..
I'm on Win 8 and even IE 10 doesn't like that syntax. I tried with opacity: 0.5; filter: alpha(opacity = 50); but it doesn't apply to the background..

Title: Re: Need help with a tooltip (jQuery)
Post by: Arantor on March 30th, 2012, 05:48 PM

No, if you alter the opacity, it's the opacity of the whole item, not just its background.

You'll have to prepare an image for it for IE.

Posted: March 30th, 2012, 05:47 PM

Though you can of course specify a regular colour first (e.g. straight black) and then use rgba for browsers that support it, as per http://css-tricks.com/ie-background-rgb-bug/

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 06:00 PM

Done! :D :D
I really like the tooltip BTW! ^_^

Title: Re: Need help with a tooltip (jQuery)
Post by: Dragooon on March 30th, 2012, 06:42 PM

Just as a tip, wrap the function around jQuery's document.ready(jQuery(document).ready) function or document onload event, the reason it wasn't working was that the element wasn't defined by the time the script was called. A shortcut for document.ready in jQuery is

Code: [Select]

$(function()
{
    ...document.ready code
});

You can also use jQuery instead of $

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 06:45 PM

Thanks! :)
So the function rewritten would be something like:

Code: [Select]

$(function()
{
    jQuery('#tooltipclick').click{
      jQuery('#tooltip').toggle();
});

Title: Re: Need help with a tooltip (jQuery)
Post by: Dragooon on March 30th, 2012, 06:46 PM

Pretty much, I'd rather use $ throughout or jQuery($ is just a shortcut for jQuery) throughout for consistency.

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 06:48 PM

ok! I used 'jQuery' because in wordpress it runs in 'no conflict' mode and the shortcut doesn't work..
This would be ok then? :)

Code: [Select]

jQuery(function()
{
    jQuery('#tooltipclick').click{
      jQuery('#tooltip').toggle();
});

Title: Re: Need help with a tooltip (jQuery)
Post by: Dragooon on March 30th, 2012, 06:52 PM

Yeah, that's good.

Title: Re: Need help with a tooltip (jQuery)
Post by: Arantor on March 30th, 2012, 06:53 PM

I have to admit I did wonder about wrapping it in document.ready() or equivalent but as it seemed to work, I didn't pay it much attention.

Mind you, given that most of the JS I've done for ages has been working with Nao's event handling in Wedge, I tend to forget that somewhat...

Title: Re: Need help with a tooltip (jQuery)
Post by: Dragooon on March 30th, 2012, 06:58 PM

Quote from Arantor on March 30th, 2012, 06:53 PM

I have to admit I did wonder about wrapping it in document.ready() or equivalent but as it seemed to work, I didn't pay it much attention.

Mind you, given that most of the JS I've done for ages has been working with Nao's event handling in Wedge, I tend to forget that somewhat...

Browser's tend to behave oddly when not wrapped in a load-type event. Some execute the script a bit later and tend to find the elements whereas others generally don't. So wrapping around a load-type event is generally a good idea, especially if you're loading more scripts from different sources and need to make sure they exist.

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 06:59 PM

Ehm.. doesn't work now... :blush: :P
A typo?

Title: Re: Need help with a tooltip (jQuery)
Post by: Arantor on March 30th, 2012, 07:01 PM

*nods* I have been bitten by that in the past, though normally it's been solved by the main script in the head tag and the specific invocation in the body after the tag already exists.

JS is, really, not my speciality. I can wield it well enough but I don't like it enough to wrangle the finer points. I want it to 'just work', though it is *much* better than it used to be.

Title: Re: Need help with a tooltip (jQuery)
Post by: Dragooon on March 30th, 2012, 07:01 PM

You only closed one function :P

Code: [Select]

jQuery(function()
{
    jQuery('#tooltipclick').click{
      jQuery('#tooltip').toggle();
   });
});

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 07:03 PM

Ehm.. still nothing.. :blush:

Title: Re: Need help with a tooltip (jQuery)
Post by: Dragooon on March 30th, 2012, 07:04 PM

Well isn't that embarrassing :P

What's your full document?

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 07:08 PM

http://[url]http://compagniaoltreconfine.com/beta/[/url] (but it has the old working code without document.ready), here the interested parts:

Code: [Select]

<html>
<head>
<script src="http://compagniaoltreconfine.com/beta/wp-content/themes/compagniaoltreconfine/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<div id="tooltip" style="display:none;text-align:right;position:absolute;width:1000px"><div id="dentrotooltip" style="float:right;width:auto;padding:12px;color:white;margin-top:-36px;background:none repeat scroll 0 0 rgba(0, 0, 0, 0.8);box-shadow:1px 1px 6px rgba(0, 0, 0, 0.5)">graphic design: <a href="http://drlm.it">drlm.it</a><br>web design: <a href="http://lorenzoraffio.com">lorenzoraffio.com</a></div></div>
	<div id="barrasotto"></div>
<p style="margin-top:5px;text-align:right">
		<a id="tooltipclick" style="color:darkred;border-bottom:1px dotted;font-size:11px;font-weight:bold">Credits</a>
	</p>

<script>
jQuery('#tooltipclick').click(function(){
  jQuery('#tooltip').toggle();
});
</script>
</body>
</html>

Don't look the horrible css.. I'll rewrite 'em later.. :niark:

If I put the new function instead of this it doesn't work..

Title: Re: Need help with a tooltip (jQuery)
Post by: Dragooon on March 30th, 2012, 07:11 PM

Technically there isn't anything wrong with the code since the script's at the end, but this works fine for me.

Code: [Select]

<html>
<head>
<script src="http://compagniaoltreconfine.com/beta/wp-content/themes/compagniaoltreconfine/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<div id="tooltip" style="display:none;text-align:right;position:absolute;width:1000px"><div id="dentrotooltip" style="float:right;width:auto;padding:12px;color:white;margin-top:-36px;background:none repeat scroll 0 0 rgba(0, 0, 0, 0.8);box-shadow:1px 1px 6px rgba(0, 0, 0, 0.5)">graphic design: <a href="http://drlm.it">drlm.it</a><br>web design: <a href="http://lorenzoraffio.com">lorenzoraffio.com</a></div></div>
	<div id="barrasotto"></div>
<p style="margin-top:5px;text-align:right">
		<a id="tooltipclick" style="color:darkred;border-bottom:1px dotted;font-size:11px;font-weight:bold">Credits</a>
	</p>

<script>
jQuery(function()
{
	jQuery('#tooltipclick').click(function(){
	  jQuery('#tooltip').toggle();
	});
});
</script>

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 07:16 PM

Oh, instead of jQuery('#tooltipclick').click{ your code is: jQuery('#tooltipclick').click(function(){
And works! ;)

Title: Re: Need help with a tooltip (jQuery)
Post by: Dragooon on March 30th, 2012, 07:25 PM

Quote from MultiformeIngegno on March 30th, 2012, 07:16 PM

Oh, instead of jQuery('#tooltipclick').\click{ your code is: jQuery('#tooltipclick').click(function(){
And works! ;)

Ohh...missed that :P. Good then :D

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 09:15 PM

'kay, don't kill me.. :P
Just a curiosity: what if I want to have the "hand cursor" appear (as it was a link)?

I tried adding href="#" to <a id="tooltipclick"> but doing this it doesn't work anymore (and with href="" of course it reloads the page)..

Title: Re: Need help with a tooltip (jQuery)
Post by: Arantor on March 30th, 2012, 09:19 PM

Well, there's two routes around this.

Firstly, you can make it an href, destination as #, and block the event in the click handler (IIRC, it's to do with the preventDefault function, but returning false would have the same effect in practice)

Secondly, you could just add a style rule to that element on its own:

Code: [Select]

tooltipclick
{
    cursor: pointer;
}

Or otherwise combine it into your stylesheet.

Title: Re: Need help with a tooltip (jQuery)
Post by: MultiformeIngegno on March 30th, 2012, 09:50 PM

Quote from Arantor on March 30th, 2012, 09:19 PM

Secondly, you could just add a style rule to that element on its own:
Code: [Select]
tooltipclick { cursor: pointer; }

Can I kiss you? :blush: :youretheboss: :+1:

Title: Re: Need help with a tooltip (jQuery)
Post by: Arantor on March 30th, 2012, 10:10 PM

I'm a bit too hairy for that, I think ;)