Simple popups or hover overs

Many a time you use the <a href'#' title='display a message' /> to display a message when you want some hover over text to display additional information, which is fine, but what if you want to display some more fancy text, lets say in HTML you are stuck.

So I went on the search to find something that was easy to implement.

I came across a number of different popups

Each having good coverage, but I ended up using overLIB mainly as Nadun at work found it very easy to use.

Here is how I have implement the library

I have implemented a simple jQuery version of the library, I am sure you could extend it to do a lot more, I always say KIS (Keep It Simple)

Add a tag class of overlib and popup tag which holds the popup information, simple, e.g.

<a href="#" class="overlib" popup="Hello World">Basic popup</a>

If you want to display HTML content in the popup, just added it to the popup tag

<a href="#" class="overlib" popup="<b>Bold</b> can be displayed too">HTML content</a>

I have also include in my sample the overlib_pagedefaults which sets a few things up for overLIB, but this is not required if you don't want to use it.

I have attached a fully working sample to make life easier.

overLib.zip (71.66 kb)

blog comments powered by Disqus

About the author

You have probably figured out by now that my name is Bryan Avery (if not, please refer to your browser's address field).  Technology is more than a career to me - it is both a hobby and a passion.  I'm an ASP.NET/C# Developer at heart...

Month List