API Docs for: 1.0.0
Show:

File: nablarch-widget-tooltip\ui_public\js\nablarch\ui\Tooltip.js

define([
  "jquery"            // jQueryライブラリ
  , "global"          // グローバル(Window)オブジェクト
  , "./Widget"        // Widget基底クラス
  , "jquery.cluetip"  // ツールチップを表示するためのjQueryプラグイン
  , "sugar"           // sugar.js ライブラリ
],
  function($, global, Widget) { "use strict";
    /**
     * ツールチップ
     * ============================================
     * ツールチップは、マウスオーバにより補足情報をポップアップで表示する機能をもつ。
     *
     * マークアップ仕様
     * ------------------------
     *
     * <%-- ツールチップを表示する要素 --%>
     * <div class="nablarch_Tooltip -name #tooltip-text">
     *   この要素にマウスオーバすることによりツールチップが表示される
     * </div>
     *
     * <%-- ツールチップに表示する内容 --%>
     * <p style="display:none;" id="tooltip-text">
     *   ツールチップに表示される値<br/>
     *
     *   ツールチップ上に項目の説明を表示する時などに利用する。
     * </p>
     *
     * @class nablarch.ui.Tooltip
     *
     * @author Hisaaki Sioiri
     * @since  1.4
     */
    Tooltip.prototype = Object.merge(new Widget(),  {
      /**
       * コンストラクタ関数
       *
       * 第2引数に渡すオプションオブジェクトの内容は以下のとおり。
       *
       *   - name: ツールチップに表示する内容を持つDOMのID属性
       *
       * @method Tooltip
       * @constructor
       *
       * @param {Element} element マーカCSSを指定したDOMノード
       * @param {Object} opts 各種オプションを保持するオブジェクト
       * @return {Tooltip} インスタンス
       */
      constructor : Tooltip,

      /**
       * 初期処理。
       *
       * ツールチップを表示するためのイベント登録を行う。
       */
      initialize : Tooltip_initialize,

      /** ツールチップに表示するテキストを持つDOMノードのID属性 */
      name : null
    });

    /**
     * ウィジェットの識別名
     * @property widgetType
     * @static
     * @readOnly
     * @type String
     * @for nablarch.ui.Tooltip
     */
    Tooltip.widgetType = "nablarch_Tooltip";

    Widget.register(Tooltip);

    /** コンストラクタ */
    function Tooltip(element, opts) {
      this.name = opts.name;
      this.constructor = Tooltip;
      Widget.call(this, element);
      this.initialize();
    }

    /** 初期処理 */
    function Tooltip_initialize() {
      this.$node.attr("rel", this.name);
      this.$node.cluetip({
        positionBy: 'mouse',
        showTitle: false,
        local: true,
        delayedClose: 0,
        dropShadow: false,
        cluetipClass: 'jtip'
      });
    }

    return Tooltip;
});