Tooltip.js - Revision history

Criminus at 18:53, 28 October 2023

2023-10-28T18:53:54Z

← Older revision		Revision as of 18:53, 28 October 2023
Line 6:		Line 6:

	removeDefaultTooltip: function() {		removeDefaultTooltip: function() {
	$("[title]").hover(function() {		$("[title], [alt]").hover(function() {
	const titleValue = $(this).attr("title");		const titleValue = $(this).attr("title") \|\| $(this).attr("alt");
	if (titleValue) { ~~// Check if titleValue is defined~~		if (titleValue) {
	$(this).attr("custom-title", titleValue).removeAttr("title");		$(this).attr("custom-title", titleValue).removeAttr("title").removeAttr("alt");
	}		}
	});		});
	},		},

	getEl: function() {		getEl: function() {
Line 22:		Line 22:
	},		},

	show: function(element) {		show: function(element) {
	const content = $(element).attr("custom-title");		// console.log("Trying to show tooltip");
	if (content) {		const content = $(element).attr("custom-title");
	console.log("Content found: ", content);		if (content) {
	this.getContainer().html(this.createPopup(content));		// console.log("Content found: ", content);
	~~console.log("Display before changing: " + this.getEl().css("display"));~~		this.getContainer().html(this.createPopup(content));
	this.active = true;		this.active = true;
	this.setTimeout();		this.setTimeout();
	~~console.log("Display after changing: " + this.getEl().css("display"));~~		} else {
	} else {		// console.log("Content not found for element: ", element);
	console.log("Content not found for element: ", element);		}
	}		},
	},

Criminus at 18:52, 28 October 2023

2023-10-28T18:52:06Z

← Older revision		Revision as of 18:52, 28 October 2023
Line 34:		Line 34:
	console.log("Content not found for element: ", element);		console.log("Content not found for element: ", element);
	}		}
	}		},

Criminus at 18:51, 28 October 2023

2023-10-28T18:51:35Z

← Older revision		Revision as of 18:51, 28 October 2023
Line 22:		Line 22:
	},		},

	show: function(element) {		show: function(element) {
	~~// console.log("Trying to show tooltip");~~		const content = $(element).attr("custom-title");
	const content = $(element).attr("custom-title");		if (content) {
	if (content) {		console.log("Content found: ", content);
	// console.log("Content found: ", content);		this.getContainer().html(this.createPopup(content));
	this.getContainer().html(this.createPopup(content));		console.log("Display before changing: " + this.getEl().css("display"));
	this.active = true;		this.active = true;
	this.setTimeout();		this.setTimeout();
	} else {		console.log("Display after changing: " + this.getEl().css("display"));
	// console.log("Content not found for element: ", element);		} else {
	}		console.log("Content not found for element: ", element);
	},		}
			}


	hide: function() {		hide: function() {

Criminus at 18:09, 28 October 2023

2023-10-28T18:09:22Z

← Older revision		Revision as of 18:09, 28 October 2023
Line 15:		Line 15:

	getEl: function() {		getEl: function() {
	return $(".overlay-~~popup~~");		return $(".overlay-popup1");
	},		},

	getContainer: function() {		getContainer: function() {
	return $(".overlay-~~contents~~");		return $(".overlay-contents1");
	},		},

Criminus at 18:07, 28 October 2023

2023-10-28T18:07:59Z

← Older revision		Revision as of 18:07, 28 October 2023
Line 92:		Line 92:
	this.removeDefaultTooltip();		this.removeDefaultTooltip();

	$("body").append('<div class="overlay-~~popup~~"><div class="~~popup_front~~"><div class="tw_bg_tl1"></div><div class="tw_bg_tr1"></div><div class="tw_bg_bl1"></div><div class="tw_bg_br1"></div></div><div class="overlay-~~contents~~"></div></div>');		$("body").append('<div class="overlay-popup1"><div class="popup_front1"><div class="tw_bg_tl1"></div><div class="tw_bg_tr1"></div><div class="tw_bg_bl1"></div><div class="tw_bg_br1"></div></div><div class="overlay-contents1"></div></div>');
	this.bindEvents();		this.bindEvents();
	}		}

Criminus at 18:05, 28 October 2023

2023-10-28T18:05:32Z

← Older revision		Revision as of 18:05, 28 October 2023
Line 92:		Line 92:
	this.removeDefaultTooltip();		this.removeDefaultTooltip();

	$("body").append('<div class="overlay-popup"><div class="popup_front"><div class="~~tw_bg_tl~~"></div><div class="~~tw_bg_tr~~"></div><div class="~~tw_bg_bl~~"></div><div class="~~tw_bg_br~~"></div></div><div class="overlay-contents"></div></div>');		$("body").append('<div class="overlay-popup"><div class="popup_front"><div class="tw_bg_tl1"></div><div class="tw_bg_tr1"></div><div class="tw_bg_bl1"></div><div class="tw_bg_br1"></div></div><div class="overlay-contents"></div></div>');
	this.bindEvents();		this.bindEvents();
	}		}

Criminus at 18:02, 28 October 2023

2023-10-28T18:02:21Z

← Older revision		Revision as of 18:02, 28 October 2023
Line 92:		Line 92:
	this.removeDefaultTooltip();		this.removeDefaultTooltip();

	$("body").append('<div class="overlay-popup"><div class="popup_front"><div class="~~tw_bg_tl1~~"></div><div class="~~tw_bg_tr1~~"></div><div class="~~tw_bg_bl1~~"></div><div class="~~tw_bg_br1~~"></div></div><div class="overlay-contents"></div></div>');		$("body").append('<div class="overlay-popup"><div class="popup_front"><div class="tw_bg_tl"></div><div class="tw_bg_tr"></div><div class="tw_bg_bl"></div><div class="tw_bg_br"></div></div><div class="overlay-contents"></div></div>');
	this.bindEvents();		this.bindEvents();
	}		}

Criminus at 17:57, 28 October 2023

2023-10-28T17:57:05Z

← Older revision		Revision as of 17:57, 28 October 2023
Line 23:		Line 23:

	show: function(element) {		show: function(element) {
	console.log("Trying to show tooltip");		// console.log("Trying to show tooltip");
	const content = $(element).attr("custom-title");		const content = $(element).attr("custom-title");
	if (content) {		if (content) {

Criminus at 17:53, 28 October 2023

2023-10-28T17:53:23Z

← Older revision		Revision as of 17:53, 28 October 2023
Line 92:		Line 92:
	this.removeDefaultTooltip();		this.removeDefaultTooltip();

	$("body").append('<div class="overlay-popup"><div class="popup_front"><div class="~~tw_bg_tl~~"></div><div class="~~tw_bg_tr~~"></div><div class="~~tw_bg_bl~~"></div><div class="~~tw_bg_br~~"></div></div><div class="overlay-contents"></div></div>');		$("body").append('<div class="overlay-popup"><div class="popup_front"><div class="tw_bg_tl1"></div><div class="tw_bg_tr1"></div><div class="tw_bg_bl1"></div><div class="tw_bg_br1"></div></div><div class="overlay-contents"></div></div>');
	this.bindEvents();		this.bindEvents();
	}		}

Criminus: Created page with "$(document).ready(function() { const toolTip = { delay: 200, timer: null, active: false, removeDefaultTooltip: function() { $("[title]").hover(function() { const titleValue = $(this).attr("title"); if (titleValue) { // Check if titleValue is defined $(this).attr("custom-title", titleValue).removeAttr("title"); } }); }, getEl: function() { return $(".overlay-popup"); },..."

2023-10-28T17:47:51Z

Created page with "$(document).ready(function() { const toolTip = { delay: 200, timer: null, active: false, removeDefaultTooltip: function() { $("[title]").hover(function() { const titleValue = $(this).attr("title"); if (titleValue) { // Check if titleValue is defined $(this).attr("custom-title", titleValue).removeAttr("title"); } }); }, getEl: function() { return $(".overlay-popup"); },..."

New page

$(document).ready(function() {
const toolTip = {
delay: 200,
timer: null,
active: false,

removeDefaultTooltip: function() {
$("[title]").hover(function() {
const titleValue = $(this).attr("title");
if (titleValue) { // Check if titleValue is defined
$(this).attr("custom-title", titleValue).removeAttr("title");
}
});
},

getEl: function() {
return $(".overlay-popup");
},

getContainer: function() {
return $(".overlay-contents");
},

show: function(element) {
console.log("Trying to show tooltip");
const content = $(element).attr("custom-title");
if (content) {
// console.log("Content found: ", content);
this.getContainer().html(this.createPopup(content));
this.active = true;
this.setTimeout();
} else {
// console.log("Content not found for element: ", element);
}
},

hide: function() {
this.getEl().css({ display: "none", top: 0, left: 0 });
this.active = false;
this.clearTimeout();
},

setTimeout: function() {
this.clearTimeout();
this.timer = window.setTimeout(() => {
this.getEl().css("display", "block");
}, this.delay);
},

clearTimeout: function() {
if (this.timer) {
window.clearTimeout(this.timer);
}
},

createPopup: function(content) {
return `<div class="oPtitle">${content}</div>`;
},

setPosition: function(event) {
const winWidth = $(window).width();
const winHeight = $(window).height();
const popupWidth = this.getEl().outerWidth();
const popupHeight = this.getEl().outerHeight();
const x = event.clientX;
const y = event.clientY;

let leftPos = x + popupWidth + 20 > winWidth ? x - popupWidth - 20 + (event.pageX - x) : x + 20 + (event.pageX - x);
let topPos = y + popupHeight + 20 > winHeight ? winHeight - popupHeight + (event.pageY - y) : y + 20 + (event.pageY - y);

this.getEl().css({ top: topPos, left: leftPos });
},

bindEvents: function() {
const tooltipEl = "[custom-title]";

$(document).on("mouseenter", tooltipEl, (event) => {
this.show(event.target);
this.setPosition(event);
});

$(document).on("mouseleave", tooltipEl, () => {
this.hide();
});

$(document).on("mousemove", tooltipEl, (event) => {
this.setPosition(event);
});
},

init: function() {
this.removeDefaultTooltip();

$("body").append('<div class="overlay-popup"><div class="popup_front"><div class="tw_bg_tl"></div><div class="tw_bg_tr"></div><div class="tw_bg_bl"></div><div class="tw_bg_br"></div></div><div class="overlay-contents"></div></div>');
this.bindEvents();
}
};

toolTip.init();
});