darktooltip
darktooltip copied to clipboard
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!!!
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>