【问题标题】:jQuery clueTip: show/hide on mouseover and sticky on clickjQuery 提示提示:鼠标悬停时显示/隐藏,点击时显示/隐藏
【发布时间】:2011-09-27 19:13:05
【问题描述】:

我正在使用 cluetip 插件和 jQuery FullCalendar 来显示事件详细信息,效果非常好。我想在每个描述中都有一个用户可以点击的链接。但我不希望用户必须点击每个事件才能显示信息。

我可以使用任何选项在鼠标悬停时显示提示提示,在鼠标悬停时将其隐藏,但在单击时使其保持粘性?还没有找到,但我想这会产生非常直观的行为......

【问题讨论】:

  • 如果有人知道提出此功能的工具提示库(无论是否为 jquery)(而不是破解提示提示),我很感兴趣。

标签: jquery jquery-plugins jquery-events cluetip


【解决方案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;
    });
});

【讨论】:

  • 恐怕这样做时用户必须滚动元素两次。一次激活/附加,一次实际触发线索提示......
【解决方案2】:

(我不确定您是否尝试过,或者这是否会有所帮助)

在提示提示上有一个“悬停”激活:

activation: 'hover', // 设置为 'click' 强制用户点击 显示线索提示

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

【讨论】:

    【解决方案3】:

    终于找到了解决我的问题的有效方法 - 通过创建 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);
        }
    });
    

    【讨论】:

      猜你喜欢
      • 2014-06-12
      • 2011-07-21
      • 1970-01-01
      • 2011-02-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-01-27
      相关资源
      最近更新 更多