<email ⁄>
<windows live messenger ⁄>
<myCurriculum type="pdf" ⁄>
#tooltip { position:absolute; display: none; z-index:1000; background-color:#900; color: #fff; padding: 2px; }
/** * BasicToolTip * * @author: pedrocorreia.net */ var BasicToolTip = function(tips) { /** * Get Html Object reference, by its ID * * @param String Id Object * @return Object */ var $ = function(id) { return document.getElementById(id); }; /** * Get Html Objects references, by their Tag Name * * @param String Id Object * @return Object */ var $tag = function(tag) { return document.getElementsByTagName(tag); }; /** * Get Html Objects references, by their Name * * @param String Id Object * @return Object */ var $name = function(name) { return document.getElementsByName(name); }; var o = $("tooltip"); //our tooltip div var _tips = {}; //tips container /** * Get Tip * @param String Id */ var _Tip = function(id) { return (_tips[id] || ""); }; /** * Get Mouse Coordinates * @param Event * * @return Int X Coordinate * @return Int Y Coordinate * @return Int Offset X * @return Int Offset Y */ var _MouseCoord = function(event) { event = event || window.event; var e = { _x: (event.pageX || event.clientX + (document.documentElement || document.body).scrollLeft), _y: (event.pageY || event.clientY + (document.documentElement || document.body).scrollTop) }; var offSet = { _x: 10, _y: -10 }; return { X: e._x, Y: e._y, OffX: offSet._x, OffY: offSet._y }; }; /** * Show Tooltip * * @param Object Element * @param Event */ var _Show = function(el, event) { var mCoord = _MouseCoord(event); o.style.left = mCoord.X + mCoord.OffX + "px"; o.style.top = mCoord.Y + mCoord.OffY + "px"; var tip = _Tip(el.getAttribute("id")); o.innerHTML = (tip.img ? "<img src='" + tip.img + "' /><br/>" : "") + (tip.txt || el.getAttribute("title")); _Fader(o).Set(100); }; /** * Hide Tooltip by fading it out */ var _Hide = function() { _Fader(o).Fade(100, 20, 100, "down"); }; /** * Fader Class * * @param Object * @return Function Set * @return Function Fade */ var _Fader = function(o) { /** * Fade * * @param Int Value * @param Int Step * @param Int Speed * @param String Fade: up or down */ var _Fade = function(value, step, speed, direction) { var interval = setInterval( function() { value += (direction==="up" ? step : -step); if (value <= 0 || value>=100) { _Set((value<=0)?0:100); clearInterval(interval); return; } _Set(value); }, speed); }; /** * Set Opacity value * * @param Int */ var _Set = function(value) { o.style.display = (value <= 0) ? "none" : "block"; o.style.opacity = value / 100; o.style.filter = 'alpha(opacity=' + value * 1 + ')'; }; return { Set: _Set, Fade: _Fade }; }; /** * Add Event * * @param Object */ var _AddEvents = function(o) { if (!o) { return; } o.onmousemove = function(event) { _Show(this, event); }; o.onmouseout = function() { _Hide(); }; }; /** * Build Tip with our specific format * * @param String Key * @param Object */ var _BuildTipObject = function(key, tip) { var _aux_tip={}; _aux_tip[key]=({img: tip.img, txt: tip.txt}); return _aux_tip; }; /** * Add Event by Object ID * * @param Object */ var _ById = function(id) { _AddEvents($(id)); }; /** * Add tips * * @param Object */ this.Add = function(tips) { for (var tip in tips) { if (tip) { _tips[tip] = tips[tip]; _ById(tip); } } }; /** * Add Event by Tag Name * * @param Object * @param Object */ this.AddByTag = function(tag, tip) { for (var i = 0, elems = $tag(tag), count = elems.length; i < count; i++) { if(elems[i].id) {this.Add(_BuildTipObject(elems[i].id, tip));} } }; /** * Add Event by Name * * @param Object * @param Object */ this.AddByName = function(name, tip) { for (var i = 0, elems = $name(name), count = elems.length; i < count; i++) { if(elems[i].id) {this.Add(_BuildTipObject(elems[i].id, tip));} } }; //add initial tips this.Add(tips); };
/** * @author pedrocorreia.net */ window.onload = function() { //tips object var tips = { lbl_m: {img: "", txt: "Please choose your Sex"}, lbl_f: {txt: "Please choose your Sex"}, my_name: { img: "", txt: "Enter your name ..." } }; //create object and add our tips object var btt = new BasicToolTip(tips); //this affects all span elements btt.AddByTag("span", { img: "", txt: "Tooltip test in <span>"}); //this will affect all html object with name="sex" btt.AddByName("sex", {img: "", txt: "Please choose your Sex"}); //this will affect the html object with id="my_span" btt.Add({ my_span: { img: "http://www.google.co.uk/logos/logo_newyear.gif", txt: "Tooltip test in <span>"} }); };
var tips = {
lbl_m: {img: "", txt: "Please choose your Sex"},
lbl_f: {txt: "Please choose your Sex"},
my_name: { img: "", txt: "Enter your name ..." }
};
var tip = {
my_span_age: {img: "image.jpg", txt: "This a simple description about something"}
};
btt.Add(tip);
//or
btt.Add({ my_span_age: { img: "http://www.google.co.uk/logos/logo_newyear.gif", txt: "Tooltip test in <span>"} });
AddByTag("span", ({img: "image.jpg", txt:"blah blah blah"});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>BasicToolTip</title> <link rel="Stylesheet" href="style.css" /> <script type="text/javascript" src="BasicToolTip.js"></script> <script type="text/javascript" src="Init.js"></script> </head> <body> <div id="tooltip"><!-- our tooltip --></div> <label for="my_name">Name</label> <input type="text" id="my_name" /> <br /><br /> <input type="radio" name="sex" value="m" id="opt_m" /><label for="opt_m" id="lbl_m">Male</label> <input type="radio" name="sex" value="f" id="opt_f" /> <label for="opt_f" id="lbl_f">Female</label> <br /><br /> <span id="my_span">Hi this a tooltip text ...</span> </body> </html>