0

jQuery で qTip プラグインを使用すると問題が発生します。js フィドルを作成して、それが何をしているかを確認しました。これを修正する方法が正確にはわかりません（リンクは問題の説明の後にあります）

だから私はチェックリストになるものを持っています。それぞれにツールチップが付いた3 つが表示<tr>されます。タスクが完了していない場合、ツール ヒントには「タスクが完了していません」と表示されます。タスクが完了すると、ツールチップに「タスク完了」と表示されます。

「トグル」をクリックすると<span>、<tr>フェードイン/アウトに変更され、クラスがトグルされ、ツールチップが「完了」から「未完了」に、またはその逆に変更されます。

それ以外は正常に動作しているようです。クラスを変更し、フェードイン/アウトし、タイトル属性も変更します。

問題は、qTip プラグインがセル内のツールチップをトグルのすぐ右にしか変更しないことです。次の 2 つのセルのツールヒントは変更されません。

すべてが適切に機能するためのようです。何が起こっているのですか？これは私を夢中にさせています!!

JSフィドル

4

1 に答える 1

1

2つの可能性：

1）代わりに

.attr('title', 'This task is not yet complete.');

使用する

.qtip('option', {'content.text': 'This task is not yet complete.'});

qTipは、初期化時に実際にtitle属性をコピーします（バインドされません）。したがって、qTipを変更するには、qTipメソッドを使用して属性を変更する必要があります。

2） qTipのコンテンツをjQueryオブジェクトに設定します。たとえばdata-qtip、タイトル付きの要素に属性を追加します。これは、（たとえば）qtipコンテンツのコンテナのIDになります（各qtipに追加のdivを追加します）。

$('[data-qtip]').each(function() {
    var q = $(this).attr('data-qtip');
    var content = $('#'+q);

    $(this).qtip({
        content: content, // here we reference the jQuery object
        position: {
            my: 'bottom center',
            at: 'top center'
        },
        style: { classes: 'ui-tooltip-dark ui-tooltip-rounded' }
    }
});

ここで、divの内容を変更すると、qtipが変更されます（これは実際にはバインディングであるため）。

個人的には、2番目の解決策の方が優れていると思います。これにより、qTipを適切に制御でき、動的なツールチップ（たとえば、インタラクティブなグラフを使用したツールチップ）で作業したときに非常にうまく機能しました。

于 2012-04-06T22:44:57.987 に答える