Raphael: Tooltipdraws a tooltip at certain cordinates.

raphael.tooltip.js

/**
 * Draws a textBox at certain cordinates
 *
 * @param {object} raphaelPaper
 * @param {type} text
 * @param {type} cordinates
 * @param {type} options that are additional
 * @returns {unresolved}
 */
function Tooltip(raphaelPaper, text, cordinates) {
	this.paper = raphaelPaper;
	this.text = text;
	this.cordinates = cordinates;
	this.settings = {
		align: 'left',
		padding: 16,
		font_size: 12,
		font_color: '#ebebeb'
	};
	this.textBox = {};
	this.textBoxCloud = {};
	this.tooltip = raphaelPaper.set();

	this.drawTooltip = function() {
		this.drawTextBox();
		this.drawCloudOverTextBox();
	};

	this.drawTextBox = function() {
		this.textBox = raphaelPaper.text(this.cordinates[0], this.cordinates[1], this.text);
		this.textBox.attr({
			'text-anchor': 'start',
			'fill': this.settings.font_color,
			'font-size': this.settings.font_size
		});
	};

	this.drawCloudOverTextBox = function() {
		var textBox = this.textBox;
		var settings = this.settings;
		var textBoxBlockBox = textBox.getBBox();
		var newPosX = textBoxBlockBox.x;
		var newPosY = textBoxBlockBox.y;
		var xOffset = 0;
		var cloudBlockInfo = {};

		switch (settings.align) {
			case 'left':
				xOffset = textBoxBlockBox.width - settings.padding / 2;
				break;
			case 'right':
				xOffset = settings.padding / 2;
				break;
			case 'center':
				xOffset = (textBoxBlockBox.width) / 2;
				break;
			default:
				xOffset = textBoxBlockBox.width - settings.padding / 2;
				break;
		}

		newPosX -= xOffset;
		newPosY -= (this.settings.padding * 2);

		this.moveTooltipText(newPosX, newPosY);

		textBoxBlockBox = textBox.getBBox();
		cloudBlockInfo = this.getCloudBlockInfo(textBoxBlockBox);

		var topLine = this.getBorderTop(cloudBlockInfo);
		var rightLine = this.getBorderRight(cloudBlockInfo);
		var bottomLine = this.getBorderBottom(cloudBlockInfo, textBoxBlockBox);
		var leftLine = this.getBorderLeft(cloudBlockInfo);

		var lines = [topLine, rightLine, bottomLine, leftLine];
		this.drawCloud(lines);
		textBox.toFront();
		this.tooltip.push(textBox, this.textBoxCloud);
	};

	this.moveTooltipText = function(x, y) {
		this.textBox.attr({
			x: x,
			y: y
		});
	};

	this.getBorderTop = function(cloudBlockInfo) {
		return cloudBlockInfo.x + ',' + cloudBlockInfo.y + 'H' + cloudBlockInfo.x2;
	};

	this.getBorderRight = function(cloudBlockInfo) {
		return 'V' + cloudBlockInfo.y2;
	};

	this.getBorderBottom = function(cloudBlockInfo, textBoxBlockBox) {
		var bottomLine = 'H' + cloudBlockInfo.x;
		var settings = this.settings;
		var offset = 0;
		switch (settings.align) {
			case 'right':
				offset = textBoxBlockBox.width - settings.padding;
				break;
			case 'center':
				offset = (textBoxBlockBox.width - settings.padding) / 2;
				break;
		}
		bottomLine = 'H' + (textBoxBlockBox.x2 - offset);
		bottomLine += 'L' + (textBoxBlockBox.x2 - offset - (settings.padding * 1 / 2)) + ',' + (cloudBlockInfo.y2 + settings.padding);
		bottomLine += 'L' + (textBoxBlockBox.x2 - offset - settings.padding) + ',' + cloudBlockInfo.y2;
		bottomLine += 'H' + cloudBlockInfo.x;
		return bottomLine;
	};

	this.getBorderLeft = function(cloudBlockInfo) {
		return 'V' + cloudBlockInfo.y;
	};

	this.getCloudBlockInfo = function(textBoxBlockBox) {
		var cloudBlockInfo = {};
		var settings = this.settings;
		cloudBlockInfo = {
			x: textBoxBlockBox.x - settings.padding,
			y: textBoxBlockBox.y - settings.padding,
			x2: textBoxBlockBox.x2 + settings.padding,
			y2: textBoxBlockBox.y2 + settings.padding,
			width: textBoxBlockBox.width + settings.padding * 2,
			height: textBoxBlockBox.height + settings.padding * 2
		};
		return cloudBlockInfo;
	};

	this.drawCloud = function(lines) {
		this.textBoxCloud = this.paper.path('M' + lines.join('') + 'z');
		this.textBoxCloud.attr({
			'fill': '#3e3e3e',
			'stroke': 'rgba(102, 102, 102, 0.8)',
			'stroke-width': 2
		});
	};
}