Ember component for adding Bootstrap tooltips to form inputs

input-tooltip.js

/**
 * InputTooltip makes it easy to add Bootstrap tooltips
 * or popovers to your input fields in Ember
 *
 * Example Tooltip Usage:
 * 
 * {{input-tooltip 
 *     tooltip_title="I'm a tooltip bro" 
 *     tooltip_placement="right"
 *     type="text" 
 * }}
 *
 * Example Popover Usage:
 * 
 * {{input-tooltip 
 *     popover=true
 *     tooltip_title="I'm a tooltip bro" 
 *     tooltip_content="This text that will be shown in the popover body"
 *     tooltip_placement="bottom"
 *     type="text" 
 * }}
 *
 * Note: You must prefix each option with tooltip_ in your
 * view definition so we don't collide with Ember view properties
 * and Bootstrap tooltip properties (eg. Both trigger and container
 * are native Ember view properteis as well as bootstrap options)
 */
var InputTooltipComponent = Ember.TextField.extend({

  /**
   * When true, use bootstrap popover instead of
   * the tooltips. All options act the same with
   * the added content option for popover body text
   */
  popover: false,

  /**
   * Bootstrap's tooltip defaults
   * Source: http://getbootstrap.com/2.3.2/javascript.html#tooltips
   */
  tooltipDefaults: {
    animation:  true,
    html:       false,
    placement:  'right',
    selector:   false,
    title:      '',
    trigger:    'hover focus',
    delay:      0,
    container:  false,
    content:    '',   // Only for popovers
  },

  /**
   * Replace defaults with any options provided with
   * the view definition.
   */
  tooltipOptions: function() {
    var options = {};

    for (var key in this.tooltipDefaults) {
      options[key] = this.get('tooltip_' + key) || this.tooltipDefaults[key];
    }
    return options;
  }.property(),

  /**
   * Setup tooltip after view element is rendered
   */
  setupTooltip: function() {

    if (this.get('popover') === true) {
      this.$().popover(this.get('tooltipOptions'));
    } else {
      this.$().tooltip(this.get('tooltipOptions'));
    }
  }.on('didInsertElement')

});

export default InputTooltipComponent;