TinyTips jQuery
Plugin
Web designer Mike Merritt (http://www.mikemerritt.me/) designed a
jQuery plugin that will give more definition on your web site. The designer-friendly
TinyTips plugin is his latest creation which adds tooltips to any element on a
page. You can check out his work in this demo:
Download the development version (http://www.mikemerritt.me/plugins/tinyTips/tiny.tips.1.1.dev.zip)
and production version (http://www.mikemerritt.me/plugins/tinyTips/tiny.tips.1.1.min.zip)
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 class="tTip"
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; }
You can check out the jQuery tutorials resources site for more of jQuery
No comments:
Post a Comment