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.

Here is a quick way to run your own popurls style website

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

Jens

2010-07-28 08:22:00

First let me thank you for sharing this nice tooltip! But there is one thing i don't get: is there any chance of an auto width for the tooltip? Than it would be perfect for me! :-)

0_0

2010-07-22 09:13:24

thank you save my time

Manoj

2010-05-10 22:32:57

nice

Kien

2010-03-11 14:11:57

I've been searching on Google for a mouseover tooltip using jquery and your page came up. thx for sharing, this solution should save me a lot of time!

Movie

2009-09-27 23:08:51

Very nice.

Patriwala

2008-12-11 04:13:11

good stuff

Robin

2008-11-24 22:51:45

Hi, Nice tooltip. I was looking for something like this. But, I am having problem when it comes to content pages. In master page it is OK, but in content page, the position of the tooltip is inaccurate. Please help. Thank you Robin (rabinkp@redstonepro.com)

Kaloy

2008-11-09 06:02:40

will this tooltip applicable to map coordinates?

Ogom O.

2008-10-24 13:16:30

Cool tuts mate

Pawan Sharma

2008-09-25 02:57:12

this is nice tooltip

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