element var p = document.createElement('p'); //
styles p.style.textAlign = "right"; p.style.padding = "3px"; p.style.margin = "0"; // p.style.backgroundColor = "#dee6ef"; p.style.backgroundColor = "#7ad"; //
class name
p.className = "close";
// element
var link = document.createElement('a');
// Set the Tooltip var to the tooltip element
link.Tooltip = tooltip;
link.style.cursor = "pointer";
link.style.color="#fff";
// Add the click handler
Tooltip._attachEvent(link, "click");
// "Close" icon
var close = document.createElement('img');
close.width = "15";
close.height = "15";
close.src="/extension/mobotix/design/mobotix/images/close.gif";
close.alt="";
// Append the text to the element
link.appendChild(close);
// Append the to the element
p.appendChild(link);
// Stick the entire thing on the start of the Tooltip
tooltip.insertBefore(p, tooltip.firstChild);
},
/**
* Manually add a Tooltip
*
* When passed an Activator and Tooltip element or ID, it is setup as a Tooltip
*
* @param activator Activator Element or ID, this is the element that activates the Tooltip
* @param tooltip Tooltip Element or ID, this is the Tooltip element itself that is shown/hidden
*/
add: function (activator, tooltip)
{
if (typeof activator == 'string') {
activator = document.getElementById(activator);
}
if (typeof tooltip == 'string') {
tooltip = document.getElementById(tooltip);
}
var dolly=tooltip.cloneNode(true);
document.getElementById("tooltipdiv").appendChild(dolly);
activator.Tooltip = dolly;
Tooltip.init(activator);
},
/**
* Manually add an image as Tooltip
*
* When passed an Activator and Tooltip element or ID, it is setup as a Tooltip
*
* @param activator Activator Element or ID, this is the element that activates the Tooltip
* @param tooltip Tooltip Element or ID, this is the Tooltip element itself that is shown/hidden
*/
addImage: function (activator, tooltip, imgSource, width, height)
{
activator = document.getElementById(activator);
tooltip = document.getElementById(tooltip);
var dolly=tooltip.cloneNode(true);
document.getElementById("tooltipdiv").appendChild(dolly);
activator.Tooltip = dolly;
activator.imgSource = imgSource;
activator.type = "image";
activator.loaded=false;
activator.width=width;
activator.height=height;
Tooltip.init(activator);
},
/**
* Manually add an image as Tooltip
*
* When passed an Activator and Tooltip element or ID, it is setup as a Tooltip
*
* @param activator Activator Element or ID, this is the element that activates the Tooltip
* @param tooltip Tooltip Element or ID, this is the Tooltip element itself that is shown/hidden
*/
addVideo: function (activator, tooltip, htmlcode, width, height)
{
activator = document.getElementById(activator);
tooltip = document.getElementById(tooltip);
var dolly=tooltip.cloneNode(true);
document.getElementById("tooltipdiv").appendChild(dolly);
activator.Tooltip = dolly;
// activator.imgSource = imgSource;
activator.htmlcode = htmlcode;
activator.type = "video";
activator.loaded=false;
activator.width=width;
activator.height=height;
Tooltip.init(activator);
},
addRefreshImage: function (activator, tooltip, imgSource, width, height)
{
var act = document.getElementById(activator);
act.refresh=true;
Tooltip.addImage(activator, tooltip, imgSource, width, height);
},
/**
* Toggle the Tooltip
*
* Shows or Hides the Tooltip
*
* @param activator Activator Element
* @return void
*/
toggle: function (activator, event)
{
try {
if (activator == 1) {
activator = document.getElementById(window._currentTT);
}
}
catch (e) { }
if (event.type == "click") {
var close_class = new RegExp("^(.*)\s?close\s?(.*)$", 'i');
var tooltip_class = new RegExp("^(.*)\s?tooltip\s?(.*)$", 'i');
if (event.srcElement) {
var node = event.srcElement;
} else if (event.fromElement) {
var node = event.fromElement;
} else if (event.target) {
var node = event.target;
}
if (node.className == null || !node.className.match(close_class)) {
var isWithinTooltip = false;
while (!isWithinTooltip && node.parentNode) {
// Check if the parent is a close element first, if so, we can break
// and we still want to close the tooltip
if (node.className && node.className.match(close_class)) {
break;
}
if (node.className && node.className != null && node.className.match(tooltip_class)) {
isWithinTooltip = true;
break;
}
node = node.parentNode;
}
}
if (isWithinTooltip) {
return;
}
}
try {
if (activator.Tooltip.isVisible) {
Tooltip._hide(activator, event);
} else {
Tooltip._show(activator, event);
}
}
catch (e) {
try {
}
catch (e) { }
}
event.cancelBubble = true;
try {
event.stopPropagation();
}
catch (e) { }
},
/**
* Show the Tooltip
*
* Displays the Tooltip and sets the hide events up. You should never need to call this manually.
*
* @param activator Activator Element
* @private
* @return void
*/
_show: function (activator, event, ignore_event)
{
if (window._currentTT) {
Tooltip._hide(document.getElementById(window._currentTT), event, true);
}
window._currentTT = activator.id;
if (ignore_event == true || typeof Tooltip.showEvent == "string" || Tooltip.showEvent.constructor && Tooltip.showEvent.constructor == Array && Tooltip.showEvent.contains(event.type)) {
if(activator.type=="image" && (!activator.loaded || activator.refresh)) {
activator.loaded=true;
var node;
if(!activator.Tooltip.childNodes[2]) { // IE
node=activator.Tooltip.childNodes[1].childNodes[0];
} else {
if(!activator.Tooltip.childNodes[2].childNodes[1]) { // Safari
node=activator.Tooltip.childNodes[1].childNodes[1];
} else {
node=activator.Tooltip.childNodes[2].childNodes[1];
}
}
node.src=activator.imgSource+'?t='+new Date().getTime();
} else if(activator.type=="video" && (!activator.loaded || activator.refresh)) {
activator.loaded=true;
var node;
if(!activator.Tooltip.childNodes[2]) { // IE
node=activator.Tooltip.childNodes[1];
} else {
if(!activator.Tooltip.childNodes[2]) { // Safari
node=activator.Tooltip.childNodes[1];
} else {
node=activator.Tooltip.childNodes[2];
}
}
node.innerHTML=activator.htmlcode;
}
activator.Tooltip.isVisible = true;
Tooltip._follow(activator, event);
activator.Tooltip.style.visibility = "visible";
activator.Tooltip.style.position = "absolute";
activator.Tooltip.style.display= "inline";
return;
}
},
/**
* Hide the Tooltip
*
* Hides the Tooltip and sets the show events up. You should never need to call this manually.
*
* @param activator Activator Element
* @private
* @return void
*/
_hide: function (activator, event, ignore_event)
{
if (!activator) {
return;
}
event = event.type;
var tooltip = activator.Tooltip;
// We need to defer this
if (ignore_event == true || ((typeof Tooltip.hideEvent == "string" && Tooltip.hideEvent == event) || Tooltip.hideEvent.constructor && Tooltip.hideEvent.constructor == Array && Tooltip.hideEvent.contains(event))) {
activator.Tooltip.isVisible = false;
activator.Tooltip.style.visibility = "hidden";
window._currentTT = false;
return;
}
},
_follow: function (activator, event)
{
if (activator.timer) {
try {
clearTimeout(activator.timer);
}
catch (e) { }
}
var winWidth, winHeight, winXOffsert, winYOffset, d=document;
if (typeof window.innerWidth!='undefined') {
winWidth = window.innerWidth;
winHeight = window.innerHeight;
winYOffset = window.pageYOffset;
winXOffset = window.pageXOffset;
} else {
if (d.documentElement && typeof d.documentElement.clientWidth!='undefined' && d.documentElement.clientWidth!=0) {
winWidth = d.documentElement.clientWidth;
winHeight = d.documentElement.clientHeight;
winXOffset = d.documentElement.scrollLeft;
winYOffset = d.documentElement.scrollTop;
} else {
if (d.body && typeof d.body.clientWidth!='undefined') {
winWidth = d.body.clientWidth;
winHeight = d.body.clientHeight;
winXOffset = d.body.scrollLeft;
winYOffset = d.body.scrollTop;
}
}
}
var tooltipWidth, tooltipHeight;
if (activator.type=="image") {
tooltipWidth=activator.width+"px";
tooltipHeight=activator.height+"px";
} else if(activator.Tooltip.currentStyle) {
if(activator.Tooltip.childNodes[1] && activator.Tooltip.childNodes[1].currentStyle) {
// Explorer
tooltipWidth = activator.Tooltip.childNodes[1].currentStyle.width;
tooltipHeight = activator.Tooltip.childNodes[1].currentStyle.height;
} else if(activator.Tooltip.childNodes[2]){
// Opera
tooltipWidth = activator.Tooltip.childNodes[2].currentStyle.getPropertyValue('width');
tooltipHeight = activator.Tooltip.childNodes[2].currentStyle.getPropertyValue('height');
}
} else if (window.getComputedStyle) {
// Firefox
tooltipWidth = window.getComputedStyle(activator.Tooltip.childNodes[2], null).width;
tooltipHeight = window.getComputedStyle(activator.Tooltip.childNodes[2], null).height;
} else {
// Safari (kann die Größe nicht ermitteln - daher default Größe)
tooltipWidth = "500px";
tooltipHeight = "400px";
}
// Manche Browser haben Probleme die Größe zu ermitteln (Opera, Konqueror)
// in diesem Fall wird ein Standardwert genommen
if(!tooltipWidth || parseInt(tooltipWidth)==0) tooltipWidth = "500px";
if(!tooltipHeight || parseInt(tooltipHeight)==0) tooltipHeight = "400px";
if (event.pageY) {
var top = event.pageY;
var left = event.pageX;
} else if (event.clientY) {
// put an If here instead, ?: doesn't seem to work
if (document.body.scrollTop > document.documentElement.scrollTop) {
var top = event.clientY + document.body.scrollTop;
} else {
var top = event.clientY + document.documentElement.scrollTop;
}
if (document.body.scrollLeft > document.documentElement.scrollLeft) {
var left = event.clientX + document.body.scrollLeft;
} else {
var left = event.clientX + document.documentElement.scrollLeft;
}
}
top=top-(parseInt(tooltipHeight)>>1);
left=left-(parseInt(tooltipWidth)>>1);
if(activator.type=="image") {
if(parseInt(tooltipWidth)>winWidth) {
tooltipWidth=winWidth+"px";
activator.Tooltip.style.width=(winWidth-80)+"px";
var node=activator.Tooltip.childNodes[activator.Tooltip.childNodes[2] && activator.Tooltip.childNodes[2].childNodes[1]?2:1];
node.style.width=(winWidth-84)+"px";
node.style.overflow="auto";
}
if(parseInt(tooltipHeight)>winHeight) {
tooltipHeight=winHeight+"px";
activator.Tooltip.style.height=(winHeight-80)+"px";
var node=activator.Tooltip.childNodes[activator.Tooltip.childNodes[2] && activator.Tooltip.childNodes[2].childNodes[1]?2:1];
node.style.height=(winHeight-84)+"px";
node.style.overflow="auto";
}
}
// Make sure the Tooltip doesn't go off the page. The 25 comes from Trial and error.
// +6 +30 are the size of the toolbar border and of the titlebar
// alert("L="+left+" T="+top+" XT="+parseInt(tooltipWidth)+" YT="+parseInt(tooltipHeight)+" WX="+winWidth+" WY="+winHeight+" XO="+winXOffset+" YO="+winYOffset);
if ((left + parseInt(tooltipWidth)+6) > winWidth + winXOffset-25) {
left = winWidth - parseInt(tooltipWidth) + winXOffset - 25 - 6;
}
if(left < winXOffset) {
left = winXOffset;
}
if ((top + parseInt(tooltipHeight)+30) > winHeight + winYOffset - 25) {
top = winHeight - parseInt(tooltipHeight) + winYOffset - 25 -30;
}
if(top < winYOffset) {
top = winYOffset;
}
activator.Tooltip.style.top = top + "px";
activator.Tooltip.style.left = left + "px";
activator.Tooltip.style.position = "fixed";
},
/**
* Attach show/hide/load events
*
* This method removes any existing events first
* in case show/hide are the same.
*
* @param element Element to which events should be attached
* @param event Event for which events are being registered. One of show/hide/load/click.
*/
_attachEvent: function (element, event)
{
var i;
var events = new Array();
if (event == "toggle") {
if (Tooltip.showEvent.constructor && Tooltip.showEvent.constructor == Array) {
for (i = 0; i < Tooltip.showEvent.length; i++) {
events.push(Tooltip.showEvent[i]);
if (element.addEventListener) {
element.addEventListener(Tooltip.showEvent[i], function (e) { Tooltip.toggle(element, e, false); return false; }, false);
} else if (element.attachEvent) {
element.attachEvent('on' + Tooltip.showEvent[i], function (e) { Tooltip.toggle(element, e, false); return false; });
}
}
} else {
events.push(Tooltip.showEvent);
if (element.addEventListener) {
element.addEventListener(Tooltip.showEvent, function (e) { Tooltip.toggle(element, e, false); return false; }, false);
} else if (element.attachEvent) {
element.attachEvent('on' + Tooltip.showEvent, function (e) { Tooltip.toggle(element, e, false); return false; });
}
}
if (Tooltip.hideEvent.constructor && Tooltip.hideEvent.constructor == Array) {
for (i = 0; i < Tooltip.hideEvent.length; i++) {
if (!events.contains(Tooltip.hideEvent[i])) {
events.push(Tooltip.hideEvent[i]);
if (element.addEventListener) {
element.addEventListener(Tooltip.hideEvent[i], function (e) { Tooltip.toggle(element, e, false); return false; }, false);
} else if (element.attachEvent) {
element.attachEvent('on' + Tooltip.hideEvent[i], function (e) { Tooltip.toggle(element, e, false); return false; });
}
}
}
} else {
if (!events.contains(Tooltip.hideEvent)) {
events.push(Tooltip.hideEvent);
if (element.addEventListener) {
element.addEventListener(Tooltip.hideEvent, function (e) { Tooltip.toggle(element, e, false); return false; }, false);
} else if (element.attachEvent) {
element.attachEvent('on' + Tooltip.hideEvent, function (e) { Tooltip.toggle(element, e, false); return false; });
}
}
}
} else if (event == "click") {
if (element.addEventListener) {
element.addEventListener("click", function (e) { Tooltip.toggle(element, e, true); }, false);
} else if (element.attachEvent) {
element.attachEvent('on' + "click", function (e) { Tooltip.toggle(element, e, true); });
}
}
}
}