https://frekul.com/js/music_distribution_top/tooltip.js

1// @ts-check
2/**
3 * @param {JQuery<HTMLElement>} [targets]
4 */
5function initializeTooltip(targets) {
6	/** @type {JQuery<HTMLElement>|false} */
7	var target = false;
8	/** @type {JQuery<HTMLElement>|false} */
9	var tooltip = false;
10	var title = false;
11	if (!targets) {
12		targets = $('[rel~=tooltip]');
13	}
14
15	var offsetParent = targets.offsetParent();
16	targets.bind('mouseenter', function () {
17		target = $(this);
18		var tip = target.attr('title');
19		var img	= target.attr('image');
20		var imgClass = target.attr('image-class');
21		tooltip = $('<div id="tooltip"></div>');
22		var intoData = '';
23		
24		if (!tip || tip == '') {
25			return false;
26		}
27		
28		target.removeAttr('title');
29		tooltip.css( 'opacity', 0 );
30		if (typeof img !== 'undefined') {
31			var imgTag = '<img src="' + img + '" class="' + imgClass + '" />';
32			intoData = tip + imgTag;
33		} else {
34			intoData = tip;
35		}
36		tooltip.html(intoData).appendTo('body');
37
38		var init_tooltip = function() {
39			if (offsetParent.width() < tooltip.outerWidth() * 1.5) {
40				tooltip.css('max-width', offsetParent.width() / 2);
41			} else {
42				tooltip.css('max-width', 340);
43			}
44
45			var pos_left = target.offset().left + (target.outerWidth() / 2) - (tooltip.outerWidth() / 2);
46			var pos_top  = target.offset().top - tooltip.outerHeight() - 20 - $('body').offset().top;
47
48			if (pos_left < 0) {
49				pos_left = target.offset().left + target.outerWidth() / 2 - 20;
50				tooltip.addClass('left');
51			} else {
52				tooltip.removeClass('left');
53			}
54
55			if (pos_left + tooltip.outerWidth() > offsetParent.width()) {
56				pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
57				tooltip.addClass('right');
58			} else {
59				tooltip.removeClass('right');
60			}
61
62			if (pos_top < 0) {
63				var pos_top  = target.offset().top + target.outerHeight() - $('body').offset().top;
64				tooltip.addClass('top');
65			} else {
66				tooltip.removeClass('top');
67			}
68			//エフェクト処理
69			tooltip.css({ left: pos_left, top: pos_top })
70				.animate({ top: '+=10', opacity: 1 }, 50);
71		};
72		init_tooltip();
73		$(window).resize(init_tooltip);
74
75		var remove_tooltip = function () {
76			tooltip.animate({ top: '-=10', opacity: 0 }, 50, function () {
77				$(this).remove();
78			});
79			target.attr('title', tip);
80			target.attr('image', img);
81		};
82		target.bind('mouseleave', remove_tooltip);
83		tooltip.bind('click', remove_tooltip);
84	});
85}
86$(document).ready(function () {
87	initializeTooltip();
88});