Cacher is the code snippet organizer for pro developers

#ToolTip Class

ツールチップのopen/closeやイベントを管理するClass。

Class (Prototype)

/**
 * Tooltip Class Description v1.2.0
 * @fileoverview ツールチップのopen/closeやイベントを管理するClass。
 *    対応ブラウザはモダンブラウザ（IE8以上）
 *    jQUery依存
*/
var Tooltip = (function () {
  var constructor = function () {
    this.$el = {};
    this.$tooltipBox = {};
    this.$openTrigger = {};
    this.$closeTrigger = {};
    this.speed = 0; /** optionsで指定可 */
    this.isLoading = false;
    this.isOpen = false;
    this.options = {};
  };
  var proto = constructor.prototype;
  /**
   * Entry point
   * @param {Object} $el - 全ての要素を含んだラッパーのjQuery Object
   * @param {Object} options - 任意でoptionの指定
   *   {Number} options.speed - アニメーションスピードの指定
   */
  proto.set = function (el, options) {
    this.setOptions(options);
    if(el){
      this.$el = $(el);
      this.setEl();
    }else{
      throw new Error('el is Required');
    }
    this.setEvents();
    return this;
  };
  proto.setOptions = function (options) {
    if(options){
      if(options.speed){
        this.speed = options.speed;
      }
    }
    return this;
  };
  proto.setEl = function () {
    this.$tooltipBox = this.$el.find('.js-tooltip-box');
    this.$openTrigger = this.$el.find('.js-tooltip-openTrigger');
    this.$closeTrigger = $('body'); //** $('body')に他イベントバインドしている場合は変更 */
    return this;
  };
  proto.setEvents = function () {
    var that = this;
    this.$tooltipBox.on('click', function (e) {
      //* $elイベントのバブリングを停止 */
      e.stopPropagation();
      return this;
    });
    this.$closeTrigger.on('click', function () {
      //* 背景を押したら閉じるイベントハンドラ */
      that.close();
      return this;
    });
    this.$openTrigger.on('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      //* アニメーション中でなければ */
      if(!that.isLoading){
        if(that.isOpen){
          that.close();
        }else{
          that.open();
        }
      }
      return this;
    });
    return this;
  };
  proto.open = function () {
    var that = this;
    if(this.speed > 0){
      //* speedを指定した場合はslideDownアニメーション */
      this.isLoading = true;
      this.$tooltipBox.css({'display': 'none'});
      this.$tooltipBox.removeClass('hide');
      this.$tooltipBox.slideDown(this.speed, function () {
        that.isLoading = false;
      });
    }else{
      this.$tooltipBox.removeClass('hide');
    }
    this.isOpen = true;
    return this;
  };
  proto.close = function () {
    var that = this;
    if(this.speed > 0){
      //* speedを指定した場合はslideUpアニメーション */
      this.isLoading = true;
      this.$tooltipBox.slideUp(this.speed, function () {
        that.isLoading = false;
        that.$tooltipBox.addClass('hide');
      });
    }else{
      this.$tooltipBox.addClass('hide');
    }
    this.isOpen = false;
    return this;
  };
  return constructor;
})();

Usage

HTML

<div id="js-tooltip">
  <div class="js-tooltip-openTrigger">open</div>
  <div class="js-tooltip-box hide">
    <p>Sample Tooltip</p>
  </div>
</div>

Javascript

// tooltipのインスタンス化
var commentTooltip = new Tooltip();
var spotSearchTooltip = new Tooltip();
tooltip1.set($('#js-tooltip'), {speed: 150});