rubentd / darktooltip Goto Github PK

View Code? Open in Web Editor NEW

137.0 10.0 35.0 88 KB

Simple customizable tooltip with confirm option and 3d effects

Home Page: rubentd.com/darktooltip

License: MIT License

JavaScript 100.00%

darktooltip's Introduction

darktooltip

A simple customizable tooltip with confirm option and effects

Usage

<div style="padding:200px;">
	<a href="#" id="example" data-tooltip="Hello world 1">Example 1</a>
	<a href="#" id="light" data-tooltip="Hello world 2">Example 2</a>
</div>
 
<script>
$(document).ready( function(){
	
	//Basic
	$('#example').darkTooltip();
	
	//With some options
	$('#light').darkTooltip({
		animation:'flipIn',
		gravity:'west',
		confirm:true,
		theme:'light',
		arrow:true
	});
});
</script>

Options

Option	Values	Default
opacity	0 – 1	0.9
content	Tooltip message	empty
size	small, medium, large	medium
gravity	south, west, north, east	south
theme	dark, light	dark
trigger	hover, click	hover
animation	none, flipIn, fadeIn	none
confirm	true, false	false
yes	Label for ‘Yes’ option	‘Yes’
no	Label for ‘No’ option	‘No’
finalMessage	A message that appears at the end of the action for the confirm	”
finalMessageDuration	Duration of the final message in ms	1000
onYes	Function that is triggered when clicking ‘Yes’ on confirm	empty
onNo	Function that is triggered when clicking ‘No’ on confirm	empty
arrow	true, false	true

Demo and examples

rubentd.com/darktooltip

darktooltip's People

Contributors

Stargazers

Watchers

darktooltip's Issues

its not working while implementing the tooltip for select option in IE only

Stop Execution waiting for user confirmation or refusal

It looks like Darktooltip doesn't support stopping the JS execution on user prompt (confirm:true), as in some cases, we need this as the user input will be used for the next step, doesn't this worth it to be developed and added?

Prevent showing multiple Tooltips when trigger is Click

I am applying a tooltip on multiple items, with trigger = click, The problem now is that when moving from one tooltip to another, the first one does not disappear until we click on anywhere in the page.
Is there any option to deal with this issue?

No animations.

There are no animations on tooltips with darktooltip.min.css

cannot unbind the darktooltip after being initialized?

It looks like the library doesn't support unbinding the tooltip once initialized?

Incorrect Positioning

If you apply dark tooltip to an element that is within a parent element that is relative or absolute positioned the tooltip will not align itself correctly.

Example

<div style="position:relative;margin:50px;">
  <a href="#" data-tooltip="My Tooltip">My Link</a>
</div>

$(function(){
  $('[data-tooltip]').darkTooltip();
});

Run this code and you will see the tooltip is offset.

Here is a codepen http://cdpn.io/ukesE

Jaggy tip

The tip is jaggy on both Safari and FireFox...

update tooltip content after its initialized

How do you update/change the tooltip content after its initialized?

e.q.
$('#button').darkTooltip({ content:'something' });
....
later in the code

$('#button').darkTooltip({ content:'something else' });

Thanks,

Thank you

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!!!