3

I've just installed Tipsy Tooltip (http://onehackoranother.com/projects/jquery/tipsy/) script on my wordpress site, I'm just wondering how I go about showing the tooltip on page load and keeping it shown.

This is the code I have so far;

<a id="logo" href="#" original-title="Happy <?php echo date("l"); ?>"></a>
<script type='text/javascript'>
  $("a#logo").tipsy('show');
</script>

Thanks in advance! :)

Ben Goodman
  • 55
  • 2
  • 8

2 Answers2

4

Well, first you have to specify the attribute you want to use instead of title, in your case original-title. Then the trigger must be set to manual. And last we want to show the tooltip, when this is done.

 $('#logo').tipsy({trigger: 'manual', title: 'original-title'});
 $('#logo').tipsy('show');
Max Allan
  • 640
  • 5
  • 18
  • Wow, thanks! :) That's sorted it! I didn't realise you had to specify the attribute or set the trigger. Thanks! :) – Ben Goodman Sep 16 '12 at 01:50
  • I've just one more problem, now that it's always showing, I've another div on my site that slides, you can see it here, http://www.quickclicksnap.com, once you click continue, it slides up, I'm now finding that the tooltip, stays where it is, rather than slides up, it's not until you refresh the page that it realigns. How do I fix this? Ben – Ben Goodman Sep 16 '12 at 02:03
  • So you want to hide the tooltip after a certain time? – Max Allan Sep 16 '12 at 02:14
  • No I want it to stay displayed but once the cookie notice at the top of the page is dismissed, I'd like the tooltip to stay inline with the logo. It seems to be left behind, down the page once you dismiss the notice. You can see what I mean here. http://www.quickclicksnap.com, the cookies notice uses localstorage once dismissed. – Ben Goodman Sep 16 '12 at 02:16
  • Ok, try to add the `$("a#logo").tipsy("show");` Inside the function that slide up the notice? Like this: `$('#hideNotice').click(function(){ $('#notice').hide(); $('a#logo').tipsy('show'); });` – Max Allan Sep 16 '12 at 02:20
  • That just changes when it loads, rather than what it does when I dismiss the message. – Ben Goodman Sep 16 '12 at 02:30
  • How does this translate into my code? It just seems to break it. – Ben Goodman Sep 16 '12 at 02:39
  • Could you share the javascript part - I should be able to tell you :) – Max Allan Sep 16 '12 at 02:47
  • `$('#slick-hide').click(function() { $('#slickbox').slideUp('fast'); localStorage.setItem('visited', true); //set flag, site now visited and element hidden $('a#logo').tipsy('show'); return false; });` Last (before return false) in #slick-hide function – Max Allan Sep 16 '12 at 02:50
  • http://pastebin.com/FcK1WJka that's the code I've got, still doesn't do anything tho, just changes when the tooltip loads, rather than stops it being left behind once the message is dismissed. – Ben Goodman Sep 16 '12 at 02:58
  • I might just move the cookie notice, what'd you think? – Ben Goodman Sep 16 '12 at 02:59
  • Ok, I just moved the cookie notice into the main content area. Fixed, thanks for all of your help! :) – Ben Goodman Sep 16 '12 at 03:11
  • Just wondering if you know how to stop the tooltip from moving if the browser window is resized. – Ben Goodman Sep 16 '12 at 13:50
0

Use document ready method:

$(document).ready(function() {
  $("a#logo").tipsy('show');
});
Bogdan Rybak
  • 2,107
  • 1
  • 19
  • 22