Technical Help & Discussion > Website Design & Programming

ParaTip - Lightweight jQuery tooltip plugin.

<< < (2/4) > >>

Simon:
Oh right!  That's actually quite cool.  :)

sam:
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: ---<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>
--- End code ---

calling in the website with:


--- Code: ---<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>
--- End code ---

psp83:
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.

 :)

sam:
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

psp83:

--- Quote from: sam 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

--- End quote ---

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: ---$(document).ready(function(){
    $('.hidemessage').click(function() {
$('#message').hide('fast');
     });
});

--- End code ---

If you add class="hidemessage" then click what you've added it to, it will hide the div that has the id message.

Navigation

[0] Message Index

[#] Next page

[*] Previous page