jQuery clueTip: показать / скрыть при наведении курсора мыши и приклеить при нажатии - PullRequest
Новая
       46

jQuery clueTip: показать / скрыть при наведении курсора мыши и приклеить при нажатии

2 голосов
/ 27 сентября 2011

Я использую плагин cluetip вместе с jQuery FullCalendar , чтобы показать детали события, которые работают довольно хорошо.Мне бы хотелось, чтобы в каждом описании была ссылка, по которой пользователь может щелкнуть.Но я не хочу, чтобы пользователи нажимали на каждое событие, чтобы показать информацию.

Есть ли какая-либо опция, которую я могу использовать, чтобы показать подсказку при наведении курсора мыши, скрыть ее при наведении мыши, но сделать ее липкойпо щелчку?Еще не нашел, но я думаю, что это сделало бы очень интуитивное поведение ...

Ответы [ 3 ]

1 голос
/ 27 сентября 2011

Обновлено до рабочего примера: 

<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;
    });
});
0 голосов
/ 26 октября 2011

Наконец-то нашел рабочий способ решения моей проблемы - создав 2 подсказки ... решение 'mouseout' не сработало так, как ожидалось: - / 

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);
    }
});
0 голосов
/ 27 сентября 2011

(я не уверен, пробовали ли вы это или это поможет, но)

На подсказке есть активатор 'hover':

активация: «hover», // установлен на «click», чтобы заставить пользователя нажать показать подсказку

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

...