/*! UIkit 2.21.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
(function(addon) {
var component;
if (window.UIkit) {
component = addon(UIkit);
}
if (typeof define == "function" && define.amd) {
define("uikit-tooltip", ["uikit"], function(){
return component || addon(UIkit);
});
}
})(function(UI){
"use strict";
var $tooltip, // tooltip container
tooltipdelay, checkdelay;
UI.component('tooltip', {
defaults: {
"offset": 5,
"pos": "top",
"animation": false,
"delay": 0, // in miliseconds
"cls": "",
"activeClass": "uk-active",
"src": function(ele, title) {
title = ele.attr('title');
if (title) {
ele.data('cached-title', title).removeAttr('title');
}
return ele.data("cached-title");
}
},
tip: "",
boot: function() {
// init code
UI.$html.on("mouseenter.tooltip.uikit focus.tooltip.uikit", "[data-uk-tooltip]", function(e) {
var ele = UI.$(this);
if (!ele.data("tooltip")) {
var obj = UI.tooltip(ele, UI.Utils.options(ele.attr("data-uk-tooltip")));
ele.trigger("mouseenter");
}
});
},
init: function() {
var $this = this;
if (!$tooltip) {
$tooltip = UI.$('<div class="uk-tooltip"></div>').appendTo("body");
}
this.on({
focus : function(e) { $this.show(); },
blur : function(e) { $this.hide(); },
mouseenter : function(e) { $this.show(); },
mouseleave : function(e) { $this.hide(); }
});
},
show: function() {
this.tip = typeof(this.options.src) === "function" ? this.options.src(this.element) : this.options.src;
if (tooltipdelay) clearTimeout(tooltipdelay);
if (checkdelay) clearTimeout(checkdelay);
if (!this.tip.length) return;
$tooltip.stop().css({"top": -2000, "visibility": "hidden"}).removeClass(this.options.activeClass).show();
$tooltip.html('<div class="uk-tooltip-inner">' + this.tip + '</div>');
var $this = this,
pos = UI.$.extend({}, this.element.offset(), {width: this.element[0].offsetWidth, height: this.element[0].offsetHeight}),
width = $tooltip[0].offsetWidth,
height = $tooltip[0].offsetHeight,
offset = typeof(this.options.offset) === "function" ? this.options.offset.call(this.element) : this.options.offset,
position = typeof(this.options.pos) === "function" ? this.options.pos.call(this.element) : this.options.pos,
tmppos = position.split("-"),
tcss = {
"display" : "none",
"visibility" : "visible",
"top" : (pos.top + pos.height + height),
"left" : pos.left
};
// prevent strange position
// when tooltip is in offcanvas etc.
if (UI.$html.css('position')=='fixed' || UI.$body.css('position')=='fixed'){
var bodyoffset = UI.$('body').offset(),
htmloffset = UI.$('html').offset(),
docoffset = {'top': (htmloffset.top + bodyoffset.top), 'left': (htmloffset.left + bodyoffset.left)};
pos.left -= docoffset.left;
pos.top -= docoffset.top;
}
if ((tmppos[0] == "left" || tmppos[0] == "right") && UI.langdirection == 'right') {
tmppos[0] = tmppos[0] == "left" ? "right" : "left";
}
var variants = {
"bottom" : {top: pos.top + pos.height + offset, left: pos.left + pos.width / 2 - width / 2},
"top" : {top: pos.top - height - offset, left: pos.left + pos.width / 2 - width / 2},
"left" : {top: pos.top + pos.height / 2 - height / 2, left: pos.left - width - offset},
"right" : {top: pos.top + pos.height / 2 - height / 2, left: pos.left + pos.width + offset}
};
UI.$.extend(tcss, variants[tmppos[0]]);
if (tmppos.length == 2) tcss.left = (tmppos[1] == 'left') ? (pos.left) : ((pos.left + pos.width) - width);
var boundary = this.checkBoundary(tcss.left, tcss.top, width, height);
if(boundary) {
switch(boundary) {
case "x":
if (tmppos.length == 2) {
position = tmppos[0]+"-"+(tcss.left < 0 ? "left": "right");
} else {
position = tcss.left < 0 ? "right": "left";
}
break;
case "y":
if (tmppos.length == 2) {
position = (tcss.top < 0 ? "bottom": "top")+"-"+tmppos[1];
} else {
position = (tcss.top < 0 ? "bottom": "top");
}
break;
case "xy":
if (tmppos.length == 2) {
position = (tcss.top < 0 ? "bottom": "top")+"-"+(tcss.left < 0 ? "left": "right");
} else {
position = tcss.left < 0 ? "right": "left";
}
break;
}
tmppos = position.split("-");
UI.$.extend(tcss, variants[tmppos[0]]);
if (tmppos.length == 2) tcss.left = (tmppos[1] == 'left') ? (pos.left) : ((pos.left + pos.width) - width);
}
tcss.left -= UI.$body.position().left;
tooltipdelay = setTimeout(function(){
$tooltip.css(tcss).attr("class", ["uk-tooltip", "uk-tooltip-"+position, $this.options.cls].join(' '));
if ($this.options.animation) {
$tooltip.css({opacity: 0, display: 'block'}).addClass($this.options.activeClass).animate({opacity: 1}, parseInt($this.options.animation, 10) || 400);
} else {
$tooltip.show().addClass($this.options.activeClass);
}
tooltipdelay = false;
// close tooltip if element was removed or hidden
checkdelay = setInterval(function(){
if(!$this.element.is(':visible')) $this.hide();
}, 150);
}, parseInt(this.options.delay, 10) || 0);
},
hide: function() {
if(this.element.is("input") && this.element[0]===document.activeElement) return;
if(tooltipdelay) clearTimeout(tooltipdelay);
if (checkdelay) clearTimeout(checkdelay);
$tooltip.stop();
if (this.options.animation) {
var $this = this;
$tooltip.fadeOut(parseInt(this.options.animation, 10) || 400, function(){
$tooltip.removeClass($this.options.activeClass)
});
} else {
$tooltip.hide().removeClass(this.options.activeClass);
}
},
content: function() {
return this.tip;
},
checkBoundary: function(left, top, width, height) {
var axis = "";
if(left < 0 || ((left - UI.$win.scrollLeft())+width) > window.innerWidth) {
axis += "x";
}
if(top < 0 || ((top - UI.$win.scrollTop())+height) > window.innerHeight) {
axis += "y";
}
return axis;
}
});
return UI.tooltip;
});
