Tooltip on toggle button

IPython/html/static/widgets/js/widget_bool.js

@@ -1,140 +1,141 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "jquery",
     "bootstrap",
 ], function(widget, $){
 
     var CheckboxView = widget.DOMWidgetView.extend({
         render : function(){
             // Called when view is rendered.
             this.$el
                 .addClass('widget-hbox widget-checkbox');
             this.$label = $('<div />')
                 .addClass('widget-label')
                 .appendTo(this.$el)
                 .hide();
             this.$checkbox = $('<input />')
                 .attr('type', 'checkbox')
                 .appendTo(this.$el)
                 .click($.proxy(this.handle_click, this));
 
             this.update(); // Set defaults.
         },
 
         update_attr: function(name, value) {
             // Set a css attr of the widget view.
             this.$checkbox.css(name, value);
         },
 
         handle_click: function() {
             // Handles when the checkbox is clicked.
 
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             var value = this.model.get('value');
             this.model.set('value', ! value, {updated_view: this});
             this.touch();
         },
         
         update : function(options){
             // Update the contents of this view
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
             this.$checkbox.prop('checked', this.model.get('value'));
 
             if (options === undefined || options.updated_view != this) {
                 var disabled = this.model.get('disabled');
                 this.$checkbox.prop('disabled', disabled);
 
                 var description = this.model.get('description');
                 if (description.trim().length === 0) {
                     this.$label.hide();
                 } else {
                     this.$label.text(description);
                     MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$label.get(0)]);
                     this.$label.show();
                 }
             }
             return CheckboxView.__super__.update.apply(this);
         },
         
     });
 
 
     var ToggleButtonView = widget.DOMWidgetView.extend({
         render : function() {
             // Called when view is rendered.
             var that = this;
             this.setElement($('<button />')
                 .addClass('btn btn-default')
                 .attr('type', 'button')
                 .on('click', function (e) {
                     e.preventDefault();
                     that.handle_click();
                 }));
-
+            this.$el.attr("data-toggle", "tooltip");
             this.model.on('change:button_style', function(model, value) {
                 this.update_button_style();
             }, this);
             this.update_button_style('');
 
             this.update(); // Set defaults.
         },
 
         update_button_style: function(previous_trait_value) {
             var class_map = {
                 primary: ['btn-primary'],
                 success: ['btn-success'],
                 info: ['btn-info'],
                 warning: ['btn-warning'],
                 danger: ['btn-danger']
             };
             this.update_mapped_classes(class_map, 'button_style', previous_trait_value);
         },
         
         update : function(options){
             // Update the contents of this view
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
             if (this.model.get('value')) {
                 this.$el.addClass('active');
             } else {
                 this.$el.removeClass('active');
             }
 
             if (options === undefined || options.updated_view != this) {
 
                 var disabled = this.model.get('disabled');
                 this.$el.prop('disabled', disabled);
 
                 var description = this.model.get('description');
+                this.$el.attr("title", this.model.get("tooltip"));
                 if (description.trim().length === 0) {
                     this.$el.html("&nbsp;"); // Preserve button height
                 } else {
                     this.$el.text(description);
                 }
             }
             return ToggleButtonView.__super__.update.apply(this);
         },
         
         handle_click: function(e) { 
             // Handles and validates user input.
 
             // Calling model.set will trigger all of the other views of the 
             // model to update.
             var value = this.model.get('value');
             this.model.set('value', ! value, {updated_view: this});
             this.touch();
         },
     });
 
     return {
         'CheckboxView': CheckboxView,
         'ToggleButtonView': ToggleButtonView,
     };
 });

IPython/html/widgets/widget_bool.py

@@ -1,50 +1,51 b''
 """Bool class.  
 
 Represents a boolean using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget, register
 from IPython.utils.traitlets import Unicode, Bool, CaselessStrEnum
 from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
 class _Bool(DOMWidget):
     """A base class for creating widgets that represent booleans."""
     value = Bool(False, help="Bool value", sync=True)
     description = Unicode('', help="Description of the boolean (label).", sync=True)
     disabled = Bool(False, help="Enable or disable user changes.", sync=True)
 
 
 @register('IPython.Checkbox')
 class Checkbox(_Bool):
     """Displays a boolean `value`."""
     _view_name = Unicode('CheckboxView', sync=True)
 
 
 @register('IPython.ToggleButton')
 class ToggleButton(_Bool):
     """Displays a boolean `value`."""
     
     _view_name = Unicode('ToggleButtonView', sync=True)
+    tooltip = Unicode(help="Tooltip caption of the toggle button.", sync=True)
 
     button_style = CaselessStrEnum(
         values=['primary', 'success', 'info', 'warning', 'danger', ''], 
         default_value='', allow_none=True, sync=True, help="""Use a
         predefined styling for the button.""")
 
 
 # Remove in IPython 4.0
 CheckboxWidget = DeprecatedClass(Checkbox, 'CheckboxWidget')
 ToggleButtonWidget = DeprecatedClass(ToggleButton, 'ToggleButtonWidget')