Web Tool Bag  
Home · Articles · Downloads · Discussion Forum · Web Links · News Categories · Synonyms DatabaseNovember 18 2017 19:50:20
Navigation
Home
Articles
Downloads
Discussion Forum
Web Links
News Categories
Synonyms Database
Search
Users Online
Guests Online: 1
No Members Online

Registered Members: 856
Unactivated Members: 118
Newest Member: lakim
Forum Threads
Newest Threads
Uncaught Error: _reg...
Module build failed:...
Installation
mochi script questions
Redirect with captch...
Hottest Threads
Installation [12]
Any questions and... [5]
Captcha picture d... [4]
Integrate with Vi... [4]
Mods: Sucess/Than... [4]
 
Latest Articles
PHP Fatal error: Ca...
Mouse pointer disapp...
UBUNTU install via U...
Geany tried to acces...
How to create MySql ...
Excelent JavaScript Tool tip and hint creator

Excelent JavaScript Tool tip and hint creator



The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with supplementary information regarding the item being hovered over. A common variant, especially in older software, is displaying a description of the tool in a status bar, but such descriptions are not usually called tooltips. Another system, on the Macintosh computer, that aims to solve the same problem, but in a slightly different way, is balloon help. Another term for tooltip, used in Microsoft end-user documentation, is “ScreenTip”.

Demonstrations of tooltip usage are prevalent on Web pages. Many graphical Web browsers display the title attribute of an HTML element as a tooltip when a user hovers the mouse cursor over that element; in such a browser you should be able to hover over Wikipedia images and hyperlinks and see a tooltip appear. Some browsers, notably Microsoft’s Internet Explorer, will also display the alt attribute of an image as a tooltip in the same manner; if a title attribute is also specified, it will override the alt attribute for tooltip content, however. Note that there is some debate over whether this latter usage (alternate text as a tooltip) is proper behavior.


Excelent Tool tip and hint creator for custom tags.

qTip.js

DOWNLOAD IT HERE

Example page HERE

Features:

  • Only 2K
  • Removes title attribute on mouse over to eliminate overlaps
  • Parses HTML in the titles
  • Bloat free. It does what it says and nothing more
  • Tested and works in IE 5.5+, Firefox, Safari, Opera
Installation:

Paste that css between your HEAD TAGS
<style>
div#qTip {
padding: 3px;
border: 1px solid #000000;
border-right-width: 1px;
border-bottom-width: 2px;
display: none;
background: #e6f2fb;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
text-align: left;
position: absolute;
z-index: 1000;
}
</style>  

Include that javascript between your HEAD TAGS:
Example:

<script language="JavaScript" src="js/qTip.js" type="text/JavaScript"></script>


Open qTip.js and setup which custom tag to be used with hints on mouse over.

Configuration:

Open the qTip example page and download the qTip.js file. Edit the qTip.js file and modify the 3 lines near the top of the document. There are comments after each line that explain what each variable controls. It’s very intuitive but here’s a quick run down:

  • qTipTag = the tag that you want to qTip-ize. Make sure to keep this variable lowercase. It’s a good idea to choose a tag that you use on your website and already has title attributes applied. If you use a CMS like TXP then the <a> tag is a good choice.
  • qTipX = change this number to move the generated pop up DIV along the x axis. This number can be positive or negtive.
  • qTipY = change this number to move the generated pop up DIV along the y axis. This number can be positive or negtive.

Posted by admin on May 23 2007 10:32:53 6017 Reads · Print
Ratings
Rating is available to Members only.

Please login or register to vote.

No Ratings have been Posted.
Login
Username

Password



Not a member yet?
Click here to register.

Forgotten your password?
Request a new one here.
Member Poll
Which PHP framework do you preffer?

Symfony

Zend

CodeIgniter

PHP on TRAX

eZ Components

Fusebox

PhpOpenbiz

Prado

QPHP

Seagull

You must login to vote.
Shoutbox
You must login to post a message.

Vince
03/10/2011 21:17
Hi, How to remove Register from Login screen? I don't want them to register and have full access! if you leave register then they should not have any rights until the admin assigns them

webtoolz
26/09/2011 11:28
Please describe your problem with more details. Thank you.

bimmer98
22/11/2010 20:31
Help. There was a problem with the request; error regarding feedbackzdr form program

Copyright © 2017 - www.webtoolbag.com