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):
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.:
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:
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:
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
@Corey
This is caused by some sort of bug in Chrome. It shows the scrollbars like that when opacity < 1 is applied to the element with the scrollbars or some of its ancestors. I am not aware of any solution at the moment
, I guess the Chrome guys just need to fix it internally.
Hello, I have been using your tips for awhile now, and I love them. They are very lightweight. I am having a problem though. I am attempting to load dynamic content within a TABLE structure. This table is contained within a DIV. If I set overflow to hidden, everything works fine. However, if I load the content into the DIV with overflow:auto so the scrollbars show up, the tip renders fine with the data, but the scrollbars appear somewhat transparent with inverted colors. I am using Chrome to display the tip. Any help that you could provide would be helpful. Thanks.
@Basti & Peter
Please post some sort of testable example(s), otherwise I just don't have any idea what might be causing the issue(s)..
I have the same Problem.
I can't get two Tooltips in one page?
Nice,
but I have a Problem.
When I get two Images and get the Twitter Tooltip.
Only the first Image had the tooltip? :O
How can I solve the problem?
Wow
Very Nice!
@Kwicher Actually, you don't necessarily need the showOn:'none' option in order to be able to trigger the tooltip manually (this is not required by the script). The problem in your case is most probably different - I guess you use the alignTo:'cursor' option and in such case, the script won't be able to position the tooltip correctly, for example, when you call the poshytip('show') method. So basically, in case you would like to call the tooltip manually, you should use the alignTo:'target' option (I should probably mention this in the docs too).
Cheers!
Hi
I was just playng with the manual triggering of the tip and I noticed one thing. It is not possible to use any of the manual "commands" until the tip is configured with showOn:'none'. This is not very convinient bacuase if I want to have a normal tip and additionally do some manual oparations, I have to define my own hover events.
Any way tochange it?
Thanks
K
@Tiger I guess you are including this line in an external .js file. If this is the case, just make sure the JavaScript file is saved in UTF-8 encoding and when linking the script on your pages you should also include the
charset="utf-8"attribute - e.g. it should look like this:<script type="text/javascript" src="[path]/script.js" charset="utf-8"></script>Thanks for you good job. I have some problem in use. My project charset is UTF-8. But when I use poshytip to show tip in Chinese word, it will show error words. Such as:('#test').poshytip({content:'请输入密码'}); the tip will show error word. How can I solve this problem? Thanks!
The demos are great! Hope to have a chance to use this in the future. Right now just lookin' around to see what jQuery has to offer and it looks like phoshy tip will go into my tool box. Thank you... TTFN
Maximum kudos on the fantastic bubble/tooltip plugin!
However, there is a bug in IE6, when one of the elements is float:right. In this case, the bubble is taking on the full width of the browser, when it should only be about 100 pixels wide (a little wider than the buttons that are there). See here: http://img197.imageshack.us/img197/1556/capturerth.png.
In all other browsers (that I care about), Chrome, FF, IE 7/8/9, Opera, Safari it works fine.
I can probably take care of this by floating the element inside another fixed-width div, which is fine by me.
Many thanks for your fine work!
This is my code for creating the tip.
$('#Print').poshytip({
content: $('#PrintContent'),
className: 'tip-yellowsimple',
alignTo: 'target',
alignX: 'center',
alignY: 'bottom',
offsetX: 0,
offsetY: 5,
bgImageFrameSize: 10,
showOn: 'none'
})
The html:
<div id="PrintContent">
<div class="CloseButton">
</div>
<div style="clear: both; float: none;">
</div>
<a id="8.5x11" href="#" target="_blank">8.5x11</a>
<a id="3x5" href="#" target="_blank">3x5 Card</a>
<a id="4x6" href="#" target="_blank">4x6 Card</a>
</div>
The css:
#PrintContent a
{
display: block;
background-image: url(/images/Buttons/BlueButton.png);
background-repeat: no-repeat;
background-position: top left;
background-color: transparent;
font-family: Verdana !important;
font-size: 8pt;
color: White;
margin: 0px 0px 10px 0px;
padding: 0px;
width: 74px;
height: 20px;
line-height: 20px;
text-decoration: none;
text-align: center;
}
#PrintContent a:hover
{
background-image: url(/images/Buttons/BlueButton_active.png);
color: #4b4b4b;
}
.CloseButton
{
background-image: url(/images/Buttons/CloseButton.png);
background-repeat: no-repeat;
background-position: top left;
background-color: transparent;
margin: 0px 0px 6px 0px;
cursor: pointer;
height: 12px;
width: 12px;
float: right; /* <== the offending css code */
}
Reaction a little slow, and takes a bit of high CPU
Great ! thanks!
Hello,
When I am using this (great btw) plugin with slide: false and with content update callback, then after the content is updated, the tip is redrawn with slide: true.
Would appreciate a quick fix
Great plugin, the best in tooltips out there!
But I have a doubt, how can I put a single image inside the tooptip. I see your Flickr example but I just put one image, and I do not know much about JavaScript/jQuery.
Can you help me?
Thank you!
@Carpii Nope, unfortunately, it requires 1.4+ and always has. I am not sure where you have seen that it recommends 1.3
Hi,
PoshyTip looks great, but Ive had some difficulty getting it to work.
Error = $.proxy is not defined in jQuery.
I notice your demos now seem to use jQuery 1.4, but the plugin recommends 1.3.2 (which is what I use since Ive had problems with 1.4).
Have the requirements for poshyTip changed recently?
Thanks
@dirk Instead of
min-width/max-width, you should just usewidthin the CSS. That's all.Right now using and I love it !
Cannot find anything in your documentation about combination of image and tekst, html, and fixed width, etc.
Will need to find out!
The fixed width is my important wish, so I will dive into your style sheet..