jQuery EasyUI 基礎プラグイン -Tooltip ツールチップ

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.tooltip.defaults を使用してデフォルトの defaults を上書きします。

ユーザーがマウスポインターをある要素の上に移動すると、追加情報を表示するためのツールチップウィンドウが表示されます。ツールチップの内容には、ページ内の任意の HTML 要素や ajax で生成された HTML 要素を含めることができます。

使用方法

ツールチップを作成

1. マークアップからツールチップを作成します。要素に 'easyui-tooltip' クラスを追加するだけで、JavaScript コードは一切必要ありません。

<a href="../index.html" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

2. JavaScript を使用してツールチップを作成します。

<a id="dd" href="#">Click here</a>

$('#dd').tooltip({
    position: 'right',
    content: '<span style="color:#fff">This is the tooltip message.</span>',
    onShow: function(){
        $(this).tooltip('tip').css({
            backgroundColor: '#666',
            borderColor: '#666'
        });
    }
});

属性

名前 型 説明 デフォルト値
position string ツールチップの位置。指定可能な値：'left'、'right'、'top'、'bottom'。 bottom
content string ツールチップのコンテンツ。 null
trackMouse boolean true に設定すると、ツールチップはマウスに追従します。 false
deltaX number ツールチップの位置の水平距離。 0
deltaY number ツールチップの位置の垂直距離。 0
showEvent string ツールチップを表示するトリガーとなるイベント。 mouseenter
hideEvent string ツールチップを非表示にするトリガーとなるイベント。 mouseleave
showDelay number ツールチップを表示するまでの時間遅延。 200
hideDelay number ツールチップを非表示にするまでの時間遅延。 100

イベント

名前 パラメータ 説明
onShow e ツールチップが表示されたときにトリガーされます。
onHide e ツールチップが非表示になったときにトリガーされます。
onUpdate content ツールチップのコンテンツが更新されたときにトリガーされます。
onPosition left,top ツールチップの位置が変更されたときにトリガーされます。
onDestroy none ツールチップが破棄されたときにトリガーされます。

メソッド

名前 パラメータ 説明
options none オプション（options）プロパティを返します。
tip none ツールチップ（tip）オブジェクトを返します。
arrow none 矢印（arrow）オブジェクトを返します。
show e ツールチップを表示します。
hide e ツールチップを非表示にします。
update content ツールチップのコンテンツを更新します。
reposition none ツールチップの位置をリセットします。
destroy none ツールチップを破棄します。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張機能