0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

Create tooltip only on mouseenter

Browse source
This commit is contained in:
j 2014-02-02 11:05:41 +00:00 committed by rolux
parent 37d9424ec8
commit 120a9eda41
3 changed files with 39 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
source/Ox.UI/js/Core/Element.js
View file

@ -90,6 +90,8 @@ Ox.Element = function(options, self) {
// stack of callbacks bound to option updates // stack of callbacks bound to option updates
self.updateCallbacks = self.updateCallbacks || []; self.updateCallbacks = self.updateCallbacks || [];
self.boundTooltipEvents = {};
// create public object // create public object
var that = new Ox.JQueryElement($(self.options.element || '<div>')) var that = new Ox.JQueryElement($(self.options.element || '<div>'))
.addClass('OxElement') .addClass('OxElement')
@ -104,6 +106,14 @@ Ox.Element = function(options, self) {
setTooltip(); setTooltip();
function bindTooltipEvents(events) {
that.off(Ox.filter(self.boundTooltipEvents, function(value, key) {
return !events[key];
})).on(self.boundTooltipEvents = Ox.filter(events, function(value, key) {
return !self.boundTooltipEvents[key];
}));
}
function mousedown(e) { function mousedown(e) {
/* /*
better mouse events better mouse events
@ -216,11 +226,14 @@ Ox.Element = function(options, self) {
} }
function mouseenter(e) { function mouseenter(e) {
if (!that.$tooltip) {
that.$tooltip = Ox.Tooltip({title: self.options.tooltip});
}
that.$tooltip.show(e); that.$tooltip.show(e);
} }
function mouseleave(e) { function mouseleave(e) {
that.$tooltip.hide(); that.$tooltip && that.$tooltip.hide();
} }
function mousemove(e) { function mousemove(e) {
@ -266,22 +279,26 @@ Ox.Element = function(options, self) {
function setTooltip() { function setTooltip() {
if (self.options.tooltip) { if (self.options.tooltip) {
if (Ox.isString(self.options.tooltip)) { if (Ox.isString(self.options.tooltip)) {
that.$tooltip = Ox.Tooltip({title: self.options.tooltip}); bindTooltipEvents({
that.on({mouseenter: mouseenter}).off({mousemove: mousemove}); mouseenter: mouseenter,
mouseleave: mouseleave
});
that.$tooltip && that.$tooltip.options({
title: self.options.tooltip,
animate: true
});
} else { } else {
that.$tooltip = Ox.Tooltip({animate: false}); that.$tooltip = Ox.Tooltip({animate: false});
that.on({mousemove: mousemove}).off({mouseenter: mouseenter}); bindTooltipEvents({
}
that.on({mouseleave: mouseleave});
} else {
if (that.$tooltip) {
that.$tooltip.remove();
that.off({
mouseenter: mouseenter,
mousemove: mousemove, mousemove: mousemove,
mouseleave: mouseleave mouseleave: mouseleave
}); });
} }
} else {
if (that.$tooltip) {
that.$tooltip.remove();
}
bindTooltipEvents({});
} }
} }

12
source/Ox.UI/js/Form/Button.js
View file

@ -48,9 +48,12 @@ Ox.Button = function(options, self) {
}) : options || {}) }) : options || {})
.update({ .update({
disabled: setDisabled, disabled: setDisabled,
//FIXME: check if this is still needed
tooltip: function() { tooltip: function() {
that.$tooltip.options({title: self.options.disabled}); if (Ox.isArray(self.options.tooltip) && that.$tooltip) {
that.$tooltip.options({
title: self.options.tooltip[self.value]
});
}
}, },
title: setTitle, title: setTitle,
value: function() { value: function() {
@ -106,6 +109,11 @@ Ox.Button = function(options, self) {
if (Ox.isArray(options.tooltip)) { if (Ox.isArray(options.tooltip)) {
self.options.tooltip = options.tooltip; self.options.tooltip = options.tooltip;
// Ox.Element creates tooltip only on mouse over.
// create here to overwrite tooltip title
if (!that.$tooltip) {
that.$tooltip = Ox.Tooltip();
}
that.$tooltip.options({ that.$tooltip.options({
title: self.options.tooltip[self.value] title: self.options.tooltip[self.value]
}); });

2
source/Ox.UI/js/Menu/MenuButton.js
View file

@ -118,7 +118,7 @@ Ox.MenuButton = function(options, self) {
that.gainFocus(); that.gainFocus();
that.addClass('OxSelected'); that.addClass('OxSelected');
from != 'button' && self.$button.options({value: true}); from != 'button' && self.$button.options({value: true});
self.options.tooltip && that.$tooltip.hide(); that.$tooltip && that.$tooltip.hide();
self.$menu.showMenu(); self.$menu.showMenu();
that.triggerEvent('show'); that.triggerEvent('show');
} }