Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"><pead><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Nice tip effect</title><style type="text/css" media="screen"><!--div#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;}body {margin: 0;padding: 30px;background: #FFF;color: #666;}h1 {font: bold 16px Arial, Helvetica, sans-serif;}p {font: 11px Arial, Helvetica, sans-serif;}a {color: #900;text-decoration: none;font-weight: bold;}a:hover {background: #900;color: #FFF;}hr {margin: 24px 0;_margin: 0;}--></style><script language="JavaScript" type="text/JavaScript">//////////////////////////////////////// /////////////// QTip-CSS Tool Tips-by Craig Erskine // http://qrayg.com | http://solardreamstudios.com//// identified red by code from Travis Beckham // http://www.squidfingers.com | http://www.podlob.com//////////////////////////////////////////////////////////////////var qTipTag = ""; // Which tag do you want to qTip-ize? Keep it lowercase! // Var qTipX =-30; // This is qTip's X offset // var qTipY = 25; // 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; var anchors = document. getElementsByTagName (qTipTag); for (var I = 0; I <anchors. length; I ++) {a = anchors [I]; sTitle =. getAttribute ("title"); if (sTitle) {. setAttribute ("tiptitle", sTitle);. removeAttribute ("title");. onmouseover = Function () {tooltip. show (this. getAttribute ('tidtitle')};. onmouseout = function () {tooltip. hide () };}} tooltip. move = function (evt) {var x = 0, y = 0; if (document. all) {// IEx = (document.doc umentElement & document.doc umentElement. scrollLeft )? Document.doc umentElement. scrollLeft: document. body. scrollLeft; y = (document.doc umentElement & document.doc umentElement. scrollTop )? Document.doc umentElement. scrollTop: document. body. scrollTop; x + = window. event. clientX; y + = window. event. clientY;} else {// Good Browsersx = 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";} window. onload = function () {tooltip. init ();}</script></pead><body><p>QTip-CSS Tooltips</p><pr /><p>Hover over the link text to see a tooltip appear and follow the mouse.</p><p>QTip will work on all like elements that are on the page. you can specify any HTML tag as your preferred element. since the title attribute can be applied to any HTML element, this technique is standards compliant!</p><pr /><p>& Raquo; View the CSS<br />& Raquo; View the JavaScript</p></body></ptml>
Tip: you can modify some code before running
