w2toolbar.tooltipShow

tooltipShow(id, [event], [forceRefresh])

idを指定してツールチップを表示します。 戻り値はundefinedです。

id: string

表示するアイテムのid。

event: object

DOMイベント。オプションです。

forceRefresh: boolean

ツールチップを強制的に表示するかどうかを指定します。オプションです。

説明

ツールバーに.items配列が存在していなければなりません。 ツールバーアイテムは.idプロパティで識別されます。

ツールバーが以下のように定義されている場合、

$('#toolbar').w2toolbar({
    name  : 'toolbar',
    items : [
        { type: 'check',  id: 'item1', text: 'Check', img: 'icon-page', checked: true,
            tooltip: 'Check button'
        },
        { type: 'radio',  id: 'item3',  group: '1', text: 'R-1', img: 'icon-add', hidden: true },
        { type: 'radio',  id: 'item4',  group: '1', text: 'R-2', img: 'icon-add' }
    ]
});

以下のように指定します。

w2ui['toolbar'].tooltipShow('item1');

デモ

ボタンをクリックすると、ツールチップを表示、非表示します。

JavaScript

$('#toolbar').w2toolbar({
  name  : 'mytoolbar',
  tooltip: 'bottom',
  items : [
    { type: 'check',  id: 'item1', text: 'check1', tooltip: 'tooltip1' },
    { type: 'check',  id: 'item2', text: 'check2', tooltip: 'tooltip2' },
    { type: 'check',  id: 'item3', text: 'check3', tooltip: 'tooltip3' },
  ],
});

$('#tooltip-show').on('click', function(){
  w2ui['mytoolbar'].tooltipShow('item1');
});
$('#tooltip-hide').on('click', function(){
  w2ui['mytoolbar'].tooltipHide('item1');
});

HTML

<button id="tooltip-show">表示</button>
<button id="tooltip-hide">非表示</button>
<div id="toolbar"></div>