1 /** 2 * Constructs a new Tooltip. 3 * @class Represents a tool-tip which creates a graphical tool-tip in WSO2Vis. 4 * @constructor 5 */ 6 wso2vis.c.Tooltip = function () { 7 this.el = document.createElement('div'); 8 this.el.setAttribute('id', 'ttipRRR'); // a random name to avoid conflicts. 9 this.el.style.display = 'none'; 10 this.el.style.width = 'auto'; 11 this.el.style.height = 'auto'; 12 this.el.style.margin = '0'; 13 this.el.style.padding = '5px'; 14 this.el.style.backgroundColor = '#ffffff'; 15 this.el.style.borderStyle = 'solid'; 16 this.el.style.borderWidth = '1px'; 17 this.el.style.borderColor = '#444444'; 18 this.el.style.opacity = 0.85; 19 20 this.el.style.fontFamily = 'Fontin-Sans, Arial'; 21 this.el.style.fontSize = '12px'; 22 23 this.el.innerHTML = "<b>wso2vis</b> tooltip demo <br/> works damn fine!"; 24 document.body.appendChild(this.el); 25 }; 26 27 wso2vis.c.Tooltip.prototype.style = function() { 28 return this.el.style; 29 }; 30 31 /** 32 * Shows the tool-tip in the given x y coordinates. 33 * @param {float} x x coordinate of the tool-tip. 34 * @param {float} y y coordinate of the tool-tip. 35 * @param {string} content content of the tool-tip. 36 */ 37 wso2vis.c.Tooltip.prototype.show = function(x, y, content) { 38 var w = this.el.style.width; 39 var h = this.el.style.height; 40 var deltaX = 15; 41 var deltaY = 15; 42 43 if ((w + x) >= (this.getWindowWidth() - deltaX)) { 44 x = x - w; 45 x = x - deltaX; 46 } 47 else { 48 x = x + deltaX; 49 } 50 51 if ((h + y) >= (this.getWindowHeight() - deltaY)) { 52 y = y - h; 53 y = y - deltaY; 54 } 55 else { 56 y = y + deltaY; 57 } 58 59 this.el.style.position = 'absolute'; 60 this.el.style.top = y + 'px'; 61 this.el.style.left = x + 'px'; 62 if (content != undefined) 63 this.el.innerHTML = content; 64 this.el.style.display = 'block'; 65 this.el.style.zindex = 1000; 66 }; 67 68 /** 69 * Hides the tool-tip. 70 */ 71 wso2vis.c.Tooltip.prototype.hide = function() { 72 this.el.style.display = 'none'; 73 }; 74 75 /** 76 * Returns current window height 77 * @private 78 */ 79 wso2vis.c.Tooltip.prototype.getWindowHeight = function(){ 80 var innerHeight; 81 if (navigator.appVersion.indexOf('MSIE')>0) { 82 innerHeight = document.body.clientHeight; 83 } 84 else { 85 innerHeight = window.innerHeight; 86 } 87 return innerHeight; 88 }; 89 90 /** 91 * Returns current window width 92 * @private 93 */ 94 wso2vis.c.Tooltip.prototype.getWindowWidth = function(){ 95 var innerWidth; 96 if (navigator.appVersion.indexOf('MSIE')>0) { 97 innerWidth = document.body.clientWidth; 98 } 99 else { 100 innerWidth = window.innerWidth; 101 } 102 return innerWidth; 103 }; 104 105