Need help with a tooltip (jQuery)

MultiformeIngegno

  • Posts: 1,337

Arantor

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

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 #17, on March 30th, 2012, 07:01 PM »
You only closed one function :P

Code: [Select]
jQuery(function()
{
    jQuery('#tooltipclick').click{
      jQuery('#tooltip').toggle();
   });
});
The way it's meant to be

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

MultiformeIngegno

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

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 #21, 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>

MultiformeIngegno

  • Posts: 1,337
Re: Need help with a tooltip (jQuery)
« Reply #22, on March 30th, 2012, 07:16 PM »
Oh, instead of jQuery('#tooltipclick').click{ your code is: jQuery('#tooltipclick').click(function(){
And works! ;)

Dragooon

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

MultiformeIngegno

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

Arantor

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

MultiformeIngegno

  • Posts: 1,337

Arantor

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