From 2d2a1816ff1c668d6a00fc792addb39848765753 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Mon, 25 Mar 2013 21:32:11 +0100 Subject: tooltips for input elements --- module/web/static/js/views/input/inputView.js | 30 +++++++++++++++++++++++++++ module/web/static/js/views/input/textInput.js | 6 ++++-- 2 files changed, 34 insertions(+), 2 deletions(-) (limited to 'module/web/static/js') diff --git a/module/web/static/js/views/input/inputView.js b/module/web/static/js/views/input/inputView.js index 15dc71aad..56087c516 100644 --- a/module/web/static/js/views/input/inputView.js +++ b/module/web/static/js/views/input/inputView.js @@ -10,6 +10,9 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) { default_value: null, description: null, + // enables tooltips + tooltip: true, + initialize: function(model, value, default_value, description) { this.model = model; this.value = value; @@ -18,9 +21,36 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) { }, render: function() { + this.renderInput(); + + // data for tooltips + if (this.description && this.tooltip) { + this.$el.data('content', this.description); +// this.$el.data('title', "TODO: title"); + this.$el.popover({ + placement: 'right', + trigger: 'hover', + delay: { show: 500, hide: 100 } + }); + } + return this; }, + renderInput: function() { + // Overwrite this + }, + + showTooltip: function() { + if (this.description && this.tooltip) + this.$el.popover('show'); + }, + + hideTooltip: function() { + if (this.description && this.tooltip) + this.$el.popover('hide'); + }, + destroy: function() { this.undelegateEvents(); this.unbind(); diff --git a/module/web/static/js/views/input/textInput.js b/module/web/static/js/views/input/textInput.js index 7252ce289..36cdf9f06 100644 --- a/module/web/static/js/views/input/textInput.js +++ b/module/web/static/js/views/input/textInput.js @@ -5,10 +5,12 @@ define(['jquery', 'backbone', 'underscore', './inputView'], function($, Backbone // TODO tagName: 'input', events: { - 'keypress': 'onChange' + 'keypress': 'onChange', + 'focus': 'showTooltip', + 'focusout': 'hideTooltip' }, - render: function() { + renderInput: function() { this.$el.attr('type', 'text'); this.$el.attr('name', 'textInput'); -- cgit v1.2.3