TinyTips jQuery Plugin
Web designer Mike Merritt designed a jQuery plugin that will give more definition on your web site by adding tooltips to any element on a page. You can check out his work in this DEMO.
Download the development version and production version zip files.
HTML
<!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 href=”#” title=”This one is also using the title.”>tristique eleifend</a> elit sit amet varius.</p>
</div>
</body>
</html>
jQuery/Javascript
Place the following at the head of your page as you include the TinyTips and jQuery.
<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>
To add tooltips, use the following:
<script type=”text/javascript”>
$(document).ready(function() {
$(‘a.tTip’).tinyTips(‘light’, ‘title’);
});
</script>
Do provide a tooltip style and content attribute.
Add the following to the stylesheet. You can create your own style by naming the class .yournameTip and use your name as the tip style. By using the dev version, you can also modify the markup for tooltips.
.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; }
0
510
