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:

  • I think that is among the so much significant info for me.
    And i am glad reading your article. But want to commentary on few common issues,
    The web site style is ideal, the articles is in
    point of fact nice : D. Just right job, cheers

    #220 by: phen375 scam on November 10, 2013 at 02:52
  • Hurrah, that's what I was exploring for, what a information!
    existing here at this webpage, thanks admin of this web page.

    #219 by: labels for water bottles on October 15, 2013 at 22:45
  • I have poshytip working well, but was wondering if there is a way to get multi-line tips? This: 'Line 1&# 13Line 2' (without the space between the # and the 13 !) shows on 2 lines in a standard HTML alt tag popup, but displays as 'Line 1Line 2' in a poshytip. I can't find a way to inset a newline into my title text that is recognized by poshytip.

    #218 by: Adrian on September 28, 2013 at 13:51
  • Yeah, I can only get this to work once per page. First instance works perfect but none after. I even edited the demo.html file and just repeated the first example and it repeated this bug. Great plugin otherwise :/

    #217 by: turkthe on September 5, 2013 at 02:23
  • I have the same ID for several elements on one page but only get one of them to show poshytip. How do I use multiple poshytips on one page?

    #216 by: Chuck on August 28, 2013 at 21:08
  • @newbiee :Download poshytip folder from the site and use latest jquery'js. thats all. it will work then .

    cheers

    #215 by: Arun on August 27, 2013 at 09:45
  • how to use poshytip in Struts2.x Grid as it is giving plain html which we write in title tag .

    Any response is welcomed
    Thanks in Advance

    #214 by: Arun on August 27, 2013 at 09:38
  • Hi All,

    I am newbiee to JQUery world. Please let me know what all files need to copied to make poshytip work??

    Any help would be highly appreciated.

    Regards,

    #213 by: newbiee to JQuery on August 13, 2013 at 11:14
  • This no longer works. I tried it with jquery UI tabs and it displays the tip at the very top of the page, regardless of what target I give it. Let me know when it's fixed.

    #212 by: Kelly on July 2, 2013 at 01:18
  • HI this is Naren, I am using this poshytip tooltip code in my website.
    I need to show tooltip on page load and always on, if the user clicks on tooltip it should disappears
    Can anyone pl help me how to do this

    #211 by: Naren on June 18, 2013 at 16:10
  • @ Vasil Dinkov : thanks ... that fixed the issue ... How can i pass the dynamic div id to the content option? have div's dynamically created and i want to show up those div's by passing an param to a function in which am intiating the poshytip for that div.
    example : content : "name"+nameId,

    this show it as "nameArul" but nameArul is a div id whose conent need to be showed in poshytip.

    Thanks

    #210 by: Arul on June 6, 2013 at 14:58