0

KO.JS を使用して、チェックボックス リストの各項目にツールチップを追加したいと考えています。私はオンラインでいくつかの例を見て、ここにあるサンプルの助けを借りて実装しました:

http://jsfiddle.net/pardahlman/6J7wE/12/

以下のようにハンドラーを作成しました。

 ko.bindingHandlers.tooltip = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
            $(element).tooltip({
                title: valueUnwrapped
            });
        },
    };

HTML のコード:

<ul data-bind="foreach: user">
<li>
<input type="checkbox" data-bind="checkedValue: val, checked: $root.chosenUsers">
<label data-bind="text: name, attr: { 'for': name } , tooltip : name"></label>
</li>
</ul>

しかし、ツールチップは表示されません。どこが間違っているのかわかりません。ブートストラップ ツールチップを実装してみました。ここでサンプルコードを取得しました：

http://jsfiddle.net/shail/vSTLU/2/

以下はhtmlコードです：

  <label id="contextBox" data-bind="text: name, attr: { 'for': name }" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip on top"></label>

以下は、JS ファイルのコードです。

  $(document).ready(function () {
       $('contextBox').tooltip();
});

残念ながら、上記の実装はどれも機能しませんでした。どこが間違っているのか教えてください。これを行うための他のより良い方法があれば、提案してください。

前もって感謝します ！

4

0 に答える 0