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.


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.


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


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


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


  • Hսmm êtes vous certain de ce que vous dites ??

    #260 by: film amateur en hd on May 13, 2014 at 05:17
  • I don't leave a ton of remarks, but i did some searching and
    wound up here Vadikom

  • Undeniably believe that which you stated. Your favorite reason seemed to be on the net the
    easiest thing to be aware of. I say to you, I definitely get annoyed while people think about worries that they just do not
    know about. You managed to hit the nail upon the top
    and defined out the whole thing without having side-effects , people could take a signal.

    Will likely be back to get more. Thanks

    Feel free to visit my web-site: download brick mansions movie

    #258 by: download brick mansions movie on April 30, 2014 at 19:56
  • Howdy! This post couldn't be written much better! Going through this post
    reminds me of my previous roommate! He always kept preaching about this.
    I'll send this article to him. Pretty sure he will have a great read.
    Many thanks for sharing!

    Also visit my web blog; watch locke

    #257 by: watch locke on April 23, 2014 at 09:43
  • Hey there, You've done a great job. I will definitely digg it and personally recommend to my friends.
    I am confident they'll be benefited from this web site.

    #256 by: Suzette on April 21, 2014 at 13:24
  • This is my first time visit at here and i am genuinely happy to read all at alone place.

    #255 by: Daine Sobus on April 20, 2014 at 08:21
  • Spontaneous effectsof low-level laser therapy (650 nm) in acute inflammatory mouse pleurisy
    induced by - Carrageenan. Medication in this regard sometime goes in vain,
    as when you stop medicine the pain returns back. Clients shouldn’t be surprised to find that some
    focus is put on this area first, before moving to the actual site of
    the condition.

    #254 by: tennis elbow on April 18, 2014 at 05:21
  • You ought to be a part of a contest for one of the finest sites on the internet.
    I will highly recommend this blog!

    #253 by: Skyrim Free Download PC Full Version on April 16, 2014 at 19:46
  • I do consider all the ideas you have introduced for your post.
    They're really convincing and can certainly work.
    Nonetheless, the posts are too short for novices. Could you please
    extend them a little from next time? Thanks for the post.

    My web page: Son épouse Télécharger

    #252 by: Son épouse Télécharger on April 9, 2014 at 05:12
  • excellent issues altogether, you simply received
    a new reader. What could you recommend in regards to your post
    that you made a few days in the past? Any certain?

    #251 by: Seymour on March 25, 2014 at 12:07
  • WOW just what I was looking for. Came here by searching for

    #250 by: abs workout for women on March 17, 2014 at 20:11
  • Hi,

    Loving your plugin, and was just wondering if you could point me to a method to keep a poshytip up despite mouse-out if a text input box has focus within the poshytip div?

    ie. fade timeout would only begin after mouseout AND child input elements have lost focus

    have a great day

    #249 by: Don on March 17, 2014 at 08:55
  • I visited various blogs however the audio feature for audio songs current at this web page is genuinely wonderful.

    #248 by: Developmentaldynamics on March 6, 2014 at 04:49
  • Hi there! I could have sworn I've visited this blog before but
    after going through a few of the posts I realized it's
    new to me. Nonetheless, I'm definitely delighted I
    found it and I'll be bookmarking it and checking back often!

    #247 by: UkrainianMusicalEnsembles on March 5, 2014 at 03:52
  • It's hard to come by educated people in this particular topic, however, you
    seem like you know what you're talking about! Thanks

    #246 by: Birgit on March 3, 2014 at 07:32
  • You determine, if you enjoy very first person shooters, F.
    Also this method motivate concerning because of this ,
    a people are present in position having to do with.
    The history of gambling has been long and colorful, fraught with glory and
    misery in equal measure, but not since the first brick
    on the Las Vegas strip was laid has there been such a significant development as online betting.

    Also visit my web page; online fruitautomaten - Charissa,

    #245 by: Charissa on March 3, 2014 at 03:54
  • I blog often and I truly thank you for your information.
    Your article has really peaked my interest. I'm going to
    bookmark your site and keep checking for new information about once
    per week. I subscribed to your RSS feed as well.

    #244 by: Jonas Pilgaard on February 25, 2014 at 07:49
  • I really love your blog.. Excellent colors & theme. Did you
    make this site yourself? Please reply back as I'm wanting to create my own
    site and would like to find out where you got this from or exactly
    what the theme is named. Thanks!

    Visit my site: ginkgo biloba to enhance memory

    #243 by: ginkgo biloba to enhance memory on February 24, 2014 at 05:13