qTip

Craig Erskine Aug 15, 2008

General

This script creates tooltips for anything on your page. You select what tags it can be attached to and then just add them to the page.

In this example, the i and input tags have been used for the tootips.

Move your mouse over the underlined words. Li nov lingua franca link text plu simplic e regulari.

Notes

Created by: Craig Erskine
Web Site: http://qrayg.com/

Posted: August 15, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: qTip.js

/* This script and many more are available free online at The JavaScript Source!! http://www.javascriptsource.com Created by: Craig Erskine | http://qrayg.com/ */ ////////////////////////////////////////////////////////////////// // qTip - CSS Tool Tips - by Craig Erskine // http://qrayg.com // // Multi-tag support by James Crooke // http://www.cj-design.com // // Inspired by code from Travis Beckham // http://www.squidfingers.com | http://www.podlob.com ////////////////////////////////////////////////////////////////// var qTipTag = "i,input"; //Which tags do you want to qTip-ize? Keep it lowercase!// var qTipX = 0; //This is qTip's X offset// var qTipY = 15; //This is qTip's Y offset// //There's no need to edit anything below this line// tooltip = { name : "qTip", offsetX : qTipX, offsetY : qTipY, tip : null } tooltip.init = function () { var tipNameSpaceURI = "http://www.w3.org/1999/xhtml"; if(!tipContainerID){ var tipContainerID = "qTip";} var tipContainer = document.getElementById(tipContainerID); if(!tipContainer) { tipContainer = document.createElementNS ? document.createElementNS(tipNameSpaceURI, "div") : document.createElement("div"); tipContainer.setAttribute("id", tipContainerID); document.getElementsByTagName("body").item(0).appendChild(tipContainer); } if (!document.getElementById) return; this.tip = document.getElementById (this.name); if (this.tip) document.onmousemove = function (evt) {tooltip.move (evt)}; var a, sTitle, elements; var elementList = qTipTag.split(","); for(var j = 0; j < elementList.length; j++) { elements = document.getElementsByTagName(elementList[j]); if(elements) { for (var i = 0; i < elements.length; i ++) { a = elements[i]; sTitle = a.getAttribute("title"); if(sTitle) { a.setAttribute("tiptitle", sTitle); a.removeAttribute("title"); a.removeAttribute("alt"); a.onmouseover = function() {tooltip.show(this.getAttribute('tiptitle'))}; a.onmouseout = function() {tooltip.hide()}; } } } } } tooltip.move = function (evt) { var x=0, y=0; if (document.all) {//IE x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft; y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop; x += window.event.clientX; y += window.event.clientY; } else {//Good Browsers x = evt.pageX; y = evt.pageY; } this.tip.style.left = (x + this.offsetX) + "px"; this.tip.style.top = (y + this.offsetY) + "px"; } tooltip.show = function (text) { if (!this.tip) return; this.tip.innerHTML = text; this.tip.style.display = "block"; } tooltip.hide = function () { if (!this.tip) return; this.tip.innerHTML = ""; this.tip.style.display = "none"; } // Multiple onload function created by: Simon Willison // http://simonwillison.net/2004/May/26/addLoadEvent/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { tooltip.init (); });

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#qTip { padding: 3px; border: 1px solid #666; border-right-width: 2px; border-bottom-width: 2px; display: none; background: #999; color: #FFF; font: bold 9px Verdana, Arial, Helvetica, sans-serif; text-align: left; position: absolute; z-index: 1000; } i { font-style: normal; text-decoration: underline; }

Head

Paste this code into the HEAD section of your HTML document.

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

Body

Paste this code into the BODY section of your HTML document

<p> In this example, the <code>i</code> and <code>input</code> tags have been used for the tootips.</p> <form> <p> Move your mouse over the input box. <input name="TextBox" type="text" id="TextBox" title="Here's an input box!"> </p> </form> <p> Move your mouse over the underlined words. Li nov lingua franca <i title="This is what the tooltip looks like in a sentence.">link text</em> plu simplic e regulari.</p>

Leave a Response
(3 comments)

Name (Required)

E-mail (Required)

Title (Required)
Comment (Required)

Submitting Your Comment

Your comment has been submitted successfully.

Chris,[br /]In order to answer you question, we would need to see your code, and how it is implemented. With that in mind, it is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Jan 16, 2009

I have this working well on a few test pages - very nice - and in some cases there are calls to at least one or two other css and js files. Seemingly no conflict.[br /][br /]However, I have one page where it does not function as yet - I think because I have a fairly complex dynamic menu running. I have tried isolating components but so far no solution. I wonder what elements I should perhaps look for that might lead to a conflict? Would it be another js file or a css issue perhaps?

Chris Dec 16, 2008

There's an issue with the tip window with select boxes in explorer 6, the select boxes show over the tip,[br /]Any idea on how to fix this? Probably with CSS

Eddie Oct 13, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

qTip

General

Notes

Source Code

External file

CSS

Head

Body

Leave a Response

Attention JavaScript Coders

Go Deeper