Notice: Version 1.1 of TinyTips has been released. Please head on over and get the latest release and check out the changes.
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('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('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 “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)
Now to give our tips a nice style we will add the following to our stylesheet. This can be customized to make it look any way you want. You can also edit the markup for the tooltips by using the dev version. The images for the default tooltip style are included in both the min and dev releases inside of the demo folder.
.tinyTip { width: 325px; padding: 17px 0px 0px 0px; display: block; background: url(../images/tinyTip-top.png) 0px 0px no-repeat; }
.tinyTip .content { padding: 0px 15px 0px 15px; font-size: 14px; font-family: "Lucida Sans Unicode"; color: #010101; background: url(../images/tinyTip-content.png) 0px 0px repeat-y; }
.tinyTip .bottom { height: 47px; background: url(../images/tinyTip-bottom.png) 0px 0px no-repeat; font: 0px/0px sans-serif; }
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.
I can not get the background(url) to load. Even on the demo you offer. So all that appears is text. I worked on this for a couple hours and can’t figure it out.
Any help is appreciaed
excelente tutorial. gracias
Great tutorial
, I’m wondering what the license is for TinyTip?
Really nice and useful tool tip. Thank you