What Is It?
TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly.
Download
Development Version -This version should be used in a development environment or if you would like to study or modify tinyTips.
Production Version – This version is compressed and should be used in a production environment.
How To Use
TinyTips is very easy to install and use. The first thing you need to do is download the latest release, uncompress it into the directory where you want to use it. Once you have done that we can move on to using it.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>tinyTips 1.0</title>
<link rel="stylesheet" type="text/css" media="screen" href="/path/to/yourStyleSheet.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.tinyTips.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.tTip').tinyTips('light', 'title');
});
</script>
</head>
<body>
<div id="global_wrapper">
<h1>Testing tinyTips</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a class="tTip" href="#" title="This tooltip is using the title of this anchor tag.">Aenean ut nunc metus</a>, gravida tincidunt libero.
Proin molestie risus at odio luctus condimentum. Sed molestie bibendum orci a faucibus. Vivamus vel lorem ut augue laoreet cursus.
Maecenas vestibulum nibh non nibh viverra posuere. Sed <a class="tTip" href="#" title="This one is also using the title.">tristique eleifend</a> elit sit amet varius.</p>
</div>
</body>
</html>
The above code is the markup of a basic page using tinyTips. The first thing you have to do is include tinyTips and the latest release of jQuery by putting the following in the head of your page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.tinyTips.js"></script>
Once that is done we can call the tinyTips plugin on any element you want to add tooltips to by using the following.
<script type="text/javascript">
$(document).ready(function() {
$('a.tTip').tinyTips('light', 'title');
});
</script>
What the above code is doing is saying hey we want any anchor tags with a class of “tTip” to have tooltips and we want to use the “light” style tooltips and the “title” attribute as the tooltip content. There are two options for specifying what content you want to use for a tooltip. You can either use “title” which will tell it to use the title attribute or you can specify a custom string of text. (which includes any markup you may want to use such as the img tag)
Note: Make sure you supply both a tooltip style and content attribute.
Now to give our tips a nice style we will add the following to our stylesheet. You can choose from any of the following styles of tooltips which are included with TinyTips. Make sure to supply the class name without “Tip” in the previous chunk of code to set which style you want to use. You can create your own tooltip style by simply naming the class .yournameTip and using yourname as the tip style when you call TinyTips. You can also edit the markup for the tooltips by using the dev version. The images for the default tooltip styles are included in both the min and dev releases inside of the demo folder.
.lightTip { width: 342px; }
.lightTip .content { width: 310px; padding: 10px; border: 6px solid #e2e2e2; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #ffffff; color: #020202; }
.lightTip .bottom { height: 14px; background: url(../images/notch-white.png) top center no-repeat; }
.yellowTip { width: 342px; }
.yellowTip .content { width: 310px; padding: 10px; border: 6px solid #f9e98e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbf7aa; color: #020202; }
.yellowTip .bottom { height: 14px; background: url(../images/notch-yellow.png) top center no-repeat; }
.orangeTip { width: 342px; }
.orangeTip .content { width: 310px; padding: 10px; border: 6px solid #f9cd8e; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #fbe3aa; color: #020202; }
.orangeTip .bottom { height: 14px; background: url(../images/notch-orange.png) top center no-repeat; }
.redTip { width: 342px; }
.redTip .content { width: 310px; padding: 10px; border: 6px solid #ce6f6f; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #f79992; color: #020202; }
.redTip .bottom { height: 14px; background: url(../images/notch-red.png) top center no-repeat; }
.greenTip { width: 342px; }
.greenTip .content { width: 310px; padding: 10px; border: 6px solid #a9db66; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #cae8a2; color: #020202; }
.greenTip .bottom { height: 14px; background: url(../images/notch-green.png) top center no-repeat; }
.blueTip { width: 342px; }
.blueTip .content { width: 310px; padding: 10px; border: 6px solid #36a4d9; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #90d8f0; color: #020202; }
.blueTip .bottom { height: 14px; background: url(../images/notch-blue.png) top center no-repeat; }
.purpleTip { width: 342px; }
.purpleTip .content { width: 310px; padding: 10px; border: 6px solid #8671de; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #a290f0; color: #020202; }
.purpleTip .bottom { height: 14px; background: url(../images/notch-purple.png) top center no-repeat; }
.darkTip { width: 342px; }
.darkTip .content { width: 310px; padding: 10px; border: 6px solid #303030; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #505050; color: #f8f8f8; }
.darkTip .bottom { height: 14px; background: url(../images/notch-dark.png) top center no-repeat; }
And that’s it. You now have some sweet new tooltips!
Demo
Go ahead and check out a demo of tinyTips and decide if this is what you are looking for.
@revista: Yeah I noticed that, not sure where it is coming from, I’ve never even heard of insomniaboldinfoorg.com. It seems it was a widespread problem.
hi,
it seems it didnt work in IE8. I try to use it in the described way. It works in parts in FF3.6.
The viewing tooltips are only flying words, without any kind of background, soket or holder.
If it is important to have the images, they should included in the zip and described where to put.
greets from Dresden,
Germany
Great Plug-In Thank you!
I would suggest a minor improvement, if I may. You set / hard-code the z-index of the tip to 1000. However, other plug-ins, for example the jQuery dialog box plug-in set the z-index to 1000+, as a result the tTip is hidden although everything works correctly.
May I suggest that the default value be hard-coded to something ridiculously higher (say 9999) or better, set dynamically using a technique like the one in the topzindex plugin: http://plugins.jquery.com/plugin-tags/z-index
Hi, is is possible to adjust the offset? Right now it appears above my image, but I would rather have it appear right in the middle of the image.
I haven’t tried to place the tooltip in the middle to the right, but I managed to placed it in the top right possition of the image.
Open jquery.tiny.Tips.js and find:
// Offsets so that the tooltip is centered over the element it is being applied to but
// raise it up above the element so it isn’t covering it.
var yOffset = tinyTip.height() + 2;
var xOffset = (tinyTip.width() / 2) – ($(this).width() / 2);
Change it to:
var yOffset = tinyTip.height() – 15;
var xOffset = (tinyTip.width() / 2) – ($(this).width() + 165);
This requiers that the width of the tooltip is untouched in the stylesheet. If you change the width change the value 165 in jquery.tiny.Tips.js
If someone have a better solution or know how to place it on the middle to the right, please post it.
Also If you know how to put the arrow image on the left or right on the tooltip, enlighten us.
Hmm…. Broken with jQuery 1.6.1. The tips cycle off and on like one of those old marquee javascripts.
hi,
thank you for this plugin. is it possible to move the tooltip when it is on the edge of the screen ? because a part of the tooltip is hidden.
Sorry for my English, i am french
Hi! We are using TinyTips on one of our sites and for the most part it works great, so thanks for making it.
One issue though, some of the users are reporting the popup box that Tinytip makes sometimes gets ‘stuck’ (in that it does not close) I have tried to test this on my IE9 browser and it is working OK. I am in the process of trying to find out what browser the users with problem are using, I suspect it will be IE7 or IE8.
Have you any idea on how to fix this issue please?
Many thanks,
Allan
Hi, this is a great tool for adding tooltips but I’m running into a problem. If I change the tinyTip attribute value, the new text does not always gets updated, I’m doing something wron?
thanks,
Federico
Great tooltip. Here is one I rolled: http://www.websanova.com/plugins/websanova/tooltip