Sponsor for PC Pals Forum

Author Topic: ParaTip - Lightweight jQuery tooltip plugin.  (Read 6299 times)

Offline psp83

  • New Member
  • *
  • Posts: 23
ParaTip - Lightweight jQuery tooltip plugin.
« on: May 17, 2010, 14:56 »
Dunno if anyone is interested but here's a plugin I created for a site I was making.

Its a simple lightweight jQuery tool tip plugin. http://bit.ly/cOwKk1

Offline Simon

  • Administrator
  • *****
  • Posts: 66798
  • First to score 7/7 in Quiz of The Week's News 2017
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #1 on: May 17, 2010, 15:04 »
Haven't a clue what it does, but thanks Paul.  :)
Many thanks to all our members, who have made PC Pals such an outstanding success!   :thumb:

Offline Rik

  • Former Admin
  • *****
  • Posts: 26508
  • Ceud mille failte
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #2 on: May 17, 2010, 15:17 »
That makes two of us. I guess it falls into the 'if you have to ask you don't need it' category. :)
Slainthe!

Rik

Offline psp83

  • New Member
  • *
  • Posts: 23
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #3 on: May 17, 2010, 15:34 »
If you go here http://www.paulparadise.co.uk/demos/paratip/demo.htm and mouse over the link you will see a tooltip appear.

Its for that  :P

 :crazy:

Offline Rik

  • Former Admin
  • *****
  • Posts: 26508
  • Ceud mille failte
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #4 on: May 17, 2010, 15:45 »
Thanks, Paul, definitely confirmed my thoughts. ;)
Slainthe!

Rik

Offline Simon

  • Administrator
  • *****
  • Posts: 66798
  • First to score 7/7 in Quiz of The Week's News 2017
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #5 on: May 17, 2010, 18:22 »
Oh right!  That's actually quite cool.  :)
Many thanks to all our members, who have made PC Pals such an outstanding success!   :thumb:

Offline sam

  • Administrator
  • *****
  • Posts: 19402
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #6 on: May 18, 2010, 02:12 »
that's quite nice - I like the background but why not just to this in the CSS - I guess why the javascript?

Just todo this in css is simply:

Code: [Select]
<style type="text/css">
.ToolText{position:relative; }
.ToolTextHover{position:relative;}
.ToolText span{display: none;}

.ToolTextHover span{
  display:block;
  position:absolute;
  border:1px solid black;
  top:1.3em;
  left:5px;
  background-color:gray; color:white;
  text-align: center;
}
</style>

calling in the website with:

Code: [Select]
<p class="ToolText" onMouseOver="javascript:this.className='ToolTextHover'" onMouseOut="javascript:this.className='ToolText'">

This is the text that will cause the tooltip

<span> And this is the Tooltip's text </span></p>
- sam | @starrydude --



Offline psp83

  • New Member
  • *
  • Posts: 23
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #7 on: May 18, 2010, 18:52 »
You can do it many ways but I decided a jQuery plugin was easier to use. Plus I hate inline JS  :ack:

Also another reason was because, I'm starting to get fed up downloading a 3rd party plugins that are over 80+ kb in size to do a simple tooltip. The one I coded above for a site I'm building is less than 2kb.

 :)

Offline sam

  • Administrator
  • *****
  • Posts: 19402
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #8 on: May 18, 2010, 23:48 »
yes I agree on the inline JS (I guess I meant jQuery more than javascript before).

I see what you are saying about the 2kb, much nicer solution, however, how big is jQuery? I assume you have to have this installed on your server? I've not used that before. Actually I tend to avoid javascript if possible
- sam | @starrydude --



Offline psp83

  • New Member
  • *
  • Posts: 23
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #9 on: May 19, 2010, 11:40 »
yes I agree on the inline JS (I guess I meant jQuery more than javascript before).

I see what you are saying about the 2kb, much nicer solution, however, how big is jQuery? I assume you have to have this installed on your server? I've not used that before. Actually I tend to avoid javascript if possible

You just download it from http://jquery.com/ and call it like any other javascript file in the head tags.

Its a JS library that allows drag&drop, animations etc.

Jquery script itself is about 24kb.

It makes life alot easier.

To hide a div all you have to do is $('.divclass').hide(); or $('#divid').hide();

or do something like this

Code: [Select]
$(document).ready(function(){
    $('.hidemessage').click(function() {
$('#message').hide('fast');
     });
});

If you add class="hidemessage" then click what you've added it to, it will hide the div that has the id message.
« Last Edit: May 19, 2010, 11:41 by psp83 »

Offline Simon

  • Administrator
  • *****
  • Posts: 66798
  • First to score 7/7 in Quiz of The Week's News 2017
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #10 on: May 19, 2010, 11:52 »
I'm glad you two know what you're talking about!  ;D
Many thanks to all our members, who have made PC Pals such an outstanding success!   :thumb:

Offline Rik

  • Former Admin
  • *****
  • Posts: 26508
  • Ceud mille failte
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #11 on: May 19, 2010, 11:58 »
I'm just keeping quiet. :)
Slainthe!

Rik

Offline Simon

  • Administrator
  • *****
  • Posts: 66798
  • First to score 7/7 in Quiz of The Week's News 2017
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #12 on: May 19, 2010, 11:59 »
They'll ignore us anyway.  ;D
Many thanks to all our members, who have made PC Pals such an outstanding success!   :thumb:

Offline Rik

  • Former Admin
  • *****
  • Posts: 26508
  • Ceud mille failte
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #13 on: May 19, 2010, 11:59 »
 ;D
Slainthe!

Rik

Offline sam

  • Administrator
  • *****
  • Posts: 19402
Re: ParaTip - Lightweight jQuery tooltip plugin.
« Reply #14 on: May 19, 2010, 13:53 »
Jquery script itself is about 24kb.

Ok - so not that heavy then... hmm, might have to have a play - though I still prefer server side stuff.
- sam | @starrydude --




Show unread posts since last visit.
Sponsor for PC Pals Forum