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:

  • 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.

    #153 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!

    #152 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

    #151 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?

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

    #149 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

    Don
    have a great day

    #148 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.

    #147 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!

    #146 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

    #145 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,

    #144 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.

    #143 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

    #142 by: ginkgo biloba to enhance memory on February 24, 2014 at 05:13
  • 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!

    #141 by: phen375 on February 21, 2014 at 16:02

Post a Comment: