TinyTips, tooltips atractivos con jQuery

Escrito por: Martín el 09-03-2010 10:00:02 y leído 945 veces

TinyTips es un plugin para jQuery que tiene como objetivo mejorar los alt y titles de nuestros enlaces. Su ventaja es que es super liviano y fácil de implementar. Su desventaja es que no persigue al ratón y se queda estático y no termina de ser del todo agradable.

Su implementación es muy fácil, basta la librería jQuery, un .JS super liviano y un poquito de CSS para adornar tus tooltips a tu gusto.

Puse una demo online, que no es más que un retoque de la original creada por Mike Merrit en su blog, pero bien vale porque la simplifiqué a un solo estilo de tip. Para descargarlo, no dejes de visitar la web de su autor.

Código XHTML

<!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>

Código JAVASCRIPT

<script type="text/javascript">
	$(document).ready(function() {
		$('a.tTip').tinyTips('light', 'title');
	});
</script>

Código CSS

.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; }

Categorías: Tooltip • Jquery • Css • •