Next Prev

Jquery Tooltip - Jtip

Read more and download "Jquery Tooltip - Jtip"

Hot on the heels of ThickBox comes jTip, a jQuery tool tip solution. Of course, a tool tip type solution is anything but monumental; you don't have to tell me that. Regardless, given my keen liking for the great jQuery library, along with a legitimate need to provide one last solution before I left Albertson's, I have conjured up a tool tip solution using jQuery. So yup, it's just another tool tip, but maybe with a little more flexibility/customization than what you might currently be use to with similar solutions.

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<base href="http://www.ajaxdaddy.com/web20/jquery/tooltip/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jTip - The Jquery Tool Tip</title>

<style type="text/css" media="all">
@import "css/global.css";
</style>

<script src="javascript/jquery.js" type="text/javascript"></script>


</head>
<body>
<script src="javascript/jtip.js" type="text/javascript"></script>
<div id="contentPad">
<p><strong>Roll over a question mark:</strong></p>
<label style="padding-right:5px">Password</label><input name="" type="text" /><span class="formInfo"><a href="ajax.htm?width=375" class="jTip" id="one" name="Password must follow these rules:">?</a></span>
<br />
<br />
<label style="padding-right:5px">User ID</label><input name="" type="text" /><span class="formInfo"><a href="ajax2.htm?width=275" class="jTip" id="two" name="">?</a></span>
<p><strong>The link below demonstrates a tool tip on a text link that allows for the link to accommodate an additional URL (using a query string). So that a link will functions as expect if clicked. Notice the cursor change.</strong></p>
<p><a href="yahoo.htm?width=175&amp;link=http://www.yahoo.com" name="Before You Click..." id="yahooCopy" class="jTip">Go To Yahoo</a></p>
</div>
</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Ari

2008-07-31 21:09:15

Thanks for share u'r plugins

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Jquery Tooltip - Jtip

Comment on this example