rubentd / darktooltip Goto Github PK
View Code? Open in Web Editor NEWSimple customizable tooltip with confirm option and 3d effects
Home Page: rubentd.com/darktooltip
License: MIT License
Simple customizable tooltip with confirm option and 3d effects
Home Page: rubentd.com/darktooltip
License: MIT License
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!!!
There are no animations on tooltips with darktooltip.min.css
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
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?
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,
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?
It looks like the library doesn't support unbinding the tooltip once initialized?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.