Poshy Tip - jQuery Plugin for Stylish Tooltips

I almost hear you asking - why another jQuery tooltip plugin? Well, I actually never planned creating this plugin until I reached the final stages of designing this website and decided to add some pretty tooltips. So I started looking for a tooltip plugin that allows easily creating stylish tooltips and also includes the most useful features for such a script. However, I wasn't pleased with the results I found so I ended up writing a completely new plugin and am now making it available for all.

Demos

You might be eager to take a look at some examples so here is the demo page right away. And below you will find a short introduction.

Notable Features

OK, so apart from the awful name, is there anything interesting about this tooltip plugin?

A Single Background Image for Scalable Tooltips

Suppose you need to code a scalable tooltip that looks like this (i.e. a tooltip with auto width/height based on the content inside it):

A figure showing a tooltip mockup that should be used to create a scalable tooltip on the page

The Usual Approach

To achieve this with most similar plugins out there you would need to slice the image into multiple separate images - for the corners of the box, for the sides, etc.:

A figure showing how you would normally need to slice the mockup into 9 images in order to code a scalable tooltip

The Poshy Tip Approach

But since the tooltips only work when JavaScript is enabled anyway, why not apply some JS magic which would make our life easier and save our server some additional requests? This is exactly what Poshy Tip was designed to do. With this plugin, you can create a scalable tooltip by just using a single background image for the tooltip body:

With Poshy Tip you need just 2 images - one for the tooltip body + 1 for the arrow

You need to create one big image for the tooltip body - e.g. something like 1024x768 pixels (which should be enough for anything you may want to display inside a tooltip in the browser viewport). You then have to set it as a background image for the tooltip container DIV in the most trivial way:

.tip-yellow {
	...
	background-image: url(tip-yellow.png);
}

Poshy Tip detects when a background image has been set for the tooltip container DIV and creates a scalable frame from it that wraps the inner contents of the tip. Finally, you just need to specify what should be the size of the background image frame around the inner content by setting the following option:

bgImageFrameSize: 10 // pixels

And the result:

A figure showing the scalable frame created from the background image that wraps the inner DIV

You can, of course, tweak the margin/padding of the inner DIV if needed.

Advanced Positioning Options

With Poshy Tip you can position the tips relative to the mouse cursor or to the target element and align them in every possible way horizontally and vertically (note the alignTo, alignX and alignY options). In addition the script makes sure the tips are always displayed in the browser viewport and also automatically positions the arrow (if available) on the appropriate side of the tooltip body.

Asynchronous Loading of the Tooltip Content

Poshy Tip supports using a function for returning the tooltip content and the script also passes an update callback function as an argument to this function. By using this callback, you can easily update asynchronously the content of the tooltip after it has been displayed. You can see a quick example on the demo page.

Documentation

You can find usage examples and a list of the options and methods available on the demo page.

License

Like jQuery, Poshy Tip is dual licensed under the MIT and GPL licenses.

Git

The Poshy Tip source code is also available at GitHub:

git clone git://github.com/vadikom/poshytip.git

Liked this post?

Don't wait & subscribe to RSS or email updates now.
Quick Tip: Sharing is also easy with the share menu below. :)

Comments:

  • Howdy would you mind letting me know which web host you're working with?

    I've loaded your blog in 3 different internet browsers and I must say this blog loads a lot faster then most.
    Can you suggest a good internet hosting
    provider at a reasonable price? Thanks a lot, I
    appreciate it!

    #240 by: phen375 on February 21, 2014 at 16:02
  • Appreciation to my father who told me about this weblog, this blog is actually awesome.

    Also visit my web-site :: drip feed backlinks

    #239 by: drip feed backlinks on February 19, 2014 at 01:54
  • You made some really good points there. I looked on the net to
    find out more about the issue and found most individuals will go along
    with your views on this web site.

    #238 by: super one minute forex system reviews on February 12, 2014 at 04:21
  • I am extremely impressed with your writing skills and also with the layout on your weblog.
    Is this a paid theme or did you modify it yourself?
    Either way keep up the nice quality writing, it is rare to see a nice blog like this one today.

    #237 by: proactol plus on February 7, 2014 at 04:25
  • It's really a cool and useful piece of information.
    I am glad that you just shared this helpful info with us.
    Please keep us informed like this. Thanks for sharing.

    Also visit my weblog - toko boneka murah (Freddy)

    #236 by: Freddy on February 5, 2014 at 12:13
  • So, select a reliable website offering free browser based games and become its member and start enjoying your free time.
    You can even engage in different online games against other customers
    to earn free bid packs. Cyberpower brands itself
    as a gaming PC company, but its basic models are very anemic.

    #235 by: Eduactional Games on February 4, 2014 at 18:19
  • Actually when someone doesn't be aware of then its
    up to other people that they will help, so here
    it occurs.

    #234 by: pozycjonowanie on February 3, 2014 at 06:25
  • I just couldn't depart your site before suggesting that I really enjoyed
    the standard information an individual supply to your guests?

    Is going to be back frequently to inspect new posts

    Here is my blog post - Hacks

    #233 by: Hacks on February 3, 2014 at 03:12
  • I'm not very ' concur what exactly transactions you
    make, nevertheless, you have a very good honest position regarding onde comprar dermaroller em portugal

    #232 by: dermaroller comprar em portugal on February 2, 2014 at 07:25
  • With havin so much content do you ever run into any issues of plagorism or copyright violation?
    My website has a lot of exclusive content
    I've either written myself or outsourced but it looks like a lot of it is popping it up all over
    the web without my authorization. Do you know
    any techniques to help stop content from being ripped off?
    I'd really appreciate it.

    #231 by: เต็นท์พับ on January 28, 2014 at 00:49
  • If you are going for best contents like myself, just go to see this web page every day for the reason that it offers quality contents, thanks

    #230 by: Comments on: MANAGEMENT LIABILITY INSURANCE on January 6, 2014 at 09:36
  • Świat chemii sprawdziany pobierz

    #229 by: Matematyka sprawdzian do pobrania gimnazjum on December 19, 2013 at 04:17