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:

  • A mission statement is an organization's vision translated into written form making a leader's view
    of the direction and purpose of an organization concreted for everyone's view.
    To flush your electric water heating system start by
    turning off the power, and the water to the heater.
    In addition to these problems, installing fixtures such as toilets requires a process which, if not followed to the letter, may cause the DIY homeowner to remove the fixture and try again.

    #169 by: slab leak San Dimas on July 25, 2014 at 14:28
  • I know this if off topic but I'm looking into starting my own blog and was curious what all
    is required to get set up? I'm assuming having a blog like yours would cost a pretty penny?
    I'm not very internet savvy so I'm not 100% certain.
    Any tips or advice would be greatly appreciated.

    Kudos

    #168 by: Maldives holidays on June 29, 2014 at 04:56
  • Hello,

    I am creating a site from a template who's author used your poshytip code. I really like it but I have one small issue. When I have a really long form and an error occurs on a form field that has long been scrolled past (ie in no longer on the display) and the field received focus, the poshytip does not show next to the field anymore. If I scroll down, I see the poshytip elsewhere. Does this make sense? If so, any idea how to fix?

    Thanks,
    Robert

    #167 by: Robert on June 19, 2014 at 06:48
  • Really great info can be found on site. aaeckedcfdcd

    #166 by: Johne152 on June 19, 2014 at 02:11
  • Hi, I do think this is an excellent website.
    I stumbledupon it ;) I am going to return yet again since i have book-marked
    it. Money and freedom is the best way to change, may you be rich and continue to guide others.

    #165 by: Lorena on June 9, 2014 at 09:41
  • Je vois de suite que vous maĆ®trisez superbement bien ce sujet

    #164 by: XXX chatte en rut on June 1, 2014 at 15:02
  • There are several different techniques used
    today, the most common of which is an exfoliating-style
    cream. They additionally offer effective payment plans for
    those salons that are unable to afford the initial asking price in a single go.
    This will give you the choice to study both sides
    and decide if it is worth it.

    #163 by: microdermabrasion before and after on May 31, 2014 at 06:23
  • Hi there! I know this is kind of off topic but I was wondering which blog
    platform are you using for this website? I'm getting sick and tired of WordPress because I've had problems with hackers and
    I'm looking at options for another platform.
    I would be fantastic if you could point me
    in the direction of a good platform.

    #162 by: tyrant unleashed cheat tool on May 29, 2014 at 02:07
  • I'll right away clutch your rss feed as I can not find your
    email subscription hyperlink or newsletter service.

    Do you've any? Please permit me realize in order that
    I could subscribe. Thanks.

    Look into my web-site - Unknown

    #161 by: Unknown on May 27, 2014 at 23:58

Post a Comment: