2

私はjQuery FullCalendarと一緒にcluetipプラグインを使用して、非常にうまく機能するイベントの詳細を表示しています。ユーザーがクリックできる各説明にリンクを付けたいと思います。しかし、ユーザーが各イベントをクリックして情報を表示する必要はありません。

マウスオーバーでclueTipを表示し、マウスアウトで非表示にしますが、クリックすると固定するために使用できるオプションはありますか? まだ見つかっていませんが、非常に直感的な動作になると思います...

4

3 に答える 3

1

実際の例に更新:

<a class="title" href="#" title="Test tooltip 1">test 1</a>

$(document).ready(function () {
    var keepTooltip = false;

    $('a.title').cluetip({ splitTitle: '|', sticky: true })
                .mouseout(function () {
                    if (!keepTooltip) {
                        $('#cluetip').hide();
                    }
                });

    $('a.title').click(function (e) {
        e.preventDefault();
        keepTooltip = true;
    });
});
于 2011-09-27T19:24:28.850 に答える
0

最後に、私の問題を解決する有効な方法を見つけました-2つのヒントを作成することにより...「マウスアウト」ソリューションは期待どおりに機能しませんでした:-/

var stickyTooltip = false;
var tooltipClass;
// ...
$(eventElement).attr('title', event.title+'\n'+info).cluetip({
    splitTitle: '\n',
    sticky: true,
    activation: 'click',
    closeText: 'Close',
    onShow: function(ct, c) {
        stickyTooltip = true;
        $('#clickInfo').hide(); // #clickInfo is a span that tells user how to fix tooltips
        tooltipClass = $(ct).attr('class');
    },
    onHide: function(ct, ci) {
        stickyTooltip = false;
    }
}).cluetip({
    splitTitle: '\n',
    sticky: false,
    activation: 'hover',
    onActivate: function(e) {
        return !stickyTooltip;
    },
    onShow: function(ct, c) {
        $('#clickInfo').show();
        stickyTooltip = false;
    },
    onHide: function(ct, ci) {
        $(ct).attr('class', tooltipClass).toggle(stickyTooltip);
    }
});
于 2011-10-26T13:27:55.330 に答える
0

（これを試したのか、これが役立つのかはわかりませんが）

手がかりのヒントに「ホバー」アクティベーションがあります。

activation: 'hover', // 'click' に設定して、ユーザーに強制的にクリックさせてclueTipを表示させます

http://plugins.learningjquery.com/cluetip/#options

于 2011-09-27T19:19:42.967 に答える