darktooltip icon indicating copy to clipboard operation
darktooltip copied to clipboard

Thank you

Open petrospap opened this issue 8 years ago • 1 comments

Hello, i would thank you for your script, i change it a bit to get title for tooltip, and appears in the dom only when you hover, this is what end up tooltip js

(function ($) {
	function Tooltip(element, O) {
		this.el = element;
		this.O = O;
		this.hideEvent;
		this.onMove = (this.O.trigger == 'hover')
	}
	Tooltip.prototype = {
		show: function () {
			var dt = this;
			$('body').append(this.tooltip);
			this.tooltip.css('display', 'block');
			if (dt.onMove) {
				this.tooltip.mouseover(function () {
					clearTimeout(dt.hideEvent)
				});
				this.tooltip.mouseout(function () {
					clearTimeout(dt.hideEvent);
					dt.hide()
				})
			}
		},
		hide: function () {
			var dt = this;
			this.hideEvent = setTimeout(function () {
					dt.tooltip.remove()
				}, 100)
		},
		setContent: function () {
			txt = this.el.attr("title");
			if (txt) {
				this.el.data('tiptext', txt).removeAttr('title');
				this.content = txt
			} else {
				return;
			}
			this.tooltip = $('<div id="tp">' + this.content + '</div>')
		},
		setEvents: function () {
			var dt = this,
			delay = 0,
			sTC;
			if (dt.onMove) {
				this.el.mousemove(function (e) {
					sTC = setTimeout(function () {
							tip = $('#tp');
							wTop = $(window).scrollTop();
							wRight = $(window).width();
							offset = 20;
							if (wRight - (offset * 2) >= tip.width() + e.pageX) {
								leftPos = e.pageX + offset - 20;
							} else {
								leftPos = wRight - tip.width() - offset
							}
							if (wTop + (offset * 2) >= e.pageY - tip.height()) {
								topPos = wTop + offset + 30;
							} else {
								topPos = e.pageY - tip.height() - offset;
							};
							tip.css({
								left: leftPos,
								top: topPos
							});
							dt.show()
						}, delay);
				}).mouseleave(function () {
					clearTimeout(sTC);
					dt.hide()
				});
			}
		},
		activate: function () {
			this.setContent();
			if (this.content) {
				this.setEvents()
			}
		}
	};
	$.fn.Tooltip = function (O) {
		return this.each(function () {
			O = $.extend({}, $.fn.Tooltip.defaults, O);
			var tooltip = new Tooltip($(this), O);
			tooltip.activate()
		})
	};
	$.fn.Tooltip.defaults = {
		trigger: 'hover'
	}
})(jQuery);

css

#tp{display:none;position:absolute;color:#fff;z-index:20002;background:rgba(51,51,51,0.85);border:0;border-radius:1px;font-size:12px;padding:4px 10px}

Thanks again!!!

petrospap avatar Aug 31 '17 10:08 petrospap

forgot html

<a href="#" class="tip" title="hello this is a tooltip">hello tip</a>

or any tag with class tip and title i.e

<span class="tip" title="tooltip here">lorem ypsum</span>

petrospap avatar Aug 31 '17 11:08 petrospap