KO ToolTip バインディング

データバインディングのオプション：

calloutFilled
closeBehavior
disabled
hideDelay
modal
mouseTrailing
showCallout
showDelay
triggers

例：

この例では、ツールチップと組み合わせて使用する ViewModel が定義されています。このビューには、disabled、closeBehavior、triggers、mouseTrailing、showCallout、calloutFilled、modal、showDelay、および hideDelay プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。

ViewModel の作成：

ViewModel スクリプト	コードのコピー
var viewModel = function () { var self = this; self.disabled = ko.observable(false); self.closeBehavior = ko.observable('auto'); self.triggers = ko.observable('hover'); self.mouseTrailing = ko.observable(true); self.showCallout = ko.observable(true); self.calloutFilled = ko.observable(true); self.modal = ko.observable(false); self.showDelay = ko.observable(150); self.hideDelay = ko.observable(150); };

ViewModel スクリプト

コードのコピー

var viewModel = function () {     
     var self = this;
     self.disabled = ko.observable(false);         
     self.closeBehavior = ko.observable('auto');         
     self.triggers = ko.observable('hover');         
     self.mouseTrailing = ko.observable(true);         
     self.showCallout = ko.observable(true);         
     self.calloutFilled = ko.observable(true);         
     self.modal = ko.observable(false);         
     self.showDelay = ko.observable(150);         
     self.hideDelay = ko.observable(150);
};

バインドコントロールを使用したビューの作成：

ビューのマークアップ	コードのコピー
<div style="width: 100px; height: 50px; background-color: red;" title="tooltip" data-bind="wijtooltip: { disabled: disabled, closeBehavior: closeBehavior, mouseTrailing: mouseTrailing, triggers: triggers, showCallout: showCallout, showDelay: showDelay, hideDelay: hideDelay, calloutFilled: calloutFilled, modal: modal}">show tooltip</div>

ビューのマークアップ

コードのコピー

<div style="width: 100px; height: 50px; background-color: red;" title="tooltip" data-bind="wijtooltip: {
    disabled: disabled, 
    closeBehavior: closeBehavior, 
    mouseTrailing: mouseTrailing, 
    triggers: triggers, 
    showCallout: showCallout, 
    showDelay: showDelay, 
    hideDelay: hideDelay, 
    calloutFilled: calloutFilled, 
    modal: modal}">show tooltip</div>

関連トピック

参照