Need help with a tooltip (jQuery)

MultiformeIngegno

  • Posts: 1,337
Need help with a tooltip (jQuery)
« on March 30th, 2012, 05:07 PM »
I need a tooltip to appear when users click on a link. Here's what I used:

Code: [Select]
<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

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Need help with a tooltip (jQuery)
« Reply #1, 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)
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

MultiformeIngegno

  • Posts: 1,337
Re: Need help with a tooltip (jQuery)
« Reply #2, 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>
Re: Need help with a tooltip (jQuery)
« Reply #3, 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) ?

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278

MultiformeIngegno

  • Posts: 1,337
Re: Need help with a tooltip (jQuery)
« Reply #5, 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..

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Need help with a tooltip (jQuery)
« Reply #6, 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/

MultiformeIngegno

  • Posts: 1,337

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Need help with a tooltip (jQuery)
« Reply #8, 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 $
The way it's meant to be

MultiformeIngegno

  • Posts: 1,337
Re: Need help with a tooltip (jQuery)
« Reply #9, 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();
});

?

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Need help with a tooltip (jQuery)
« Reply #10, 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.

MultiformeIngegno

  • Posts: 1,337
Re: Need help with a tooltip (jQuery)
« Reply #11, 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();
});

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Need help with a tooltip (jQuery)
« Reply #13, 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...

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: Need help with a tooltip (jQuery)
« Reply #14, 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.