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;
});