代码之家 › 专栏 › 技术社区 › nickytonline

显式显示jQuery.工具提示插件

jquery-plugins jquery javascript

nickytonline · 技术社区 · 16 年前

我正在使用jQuery工具提示控件, http://docs.jquery.com/Plugins/Tooltip 而且效果很好。但是,当有人在自动完成控件中键入2个字符时,我有一个任务来显示工具提示。我已经把它全部连接起来了,但是我不知道如何显式地显示jQuery工具提示插件。

MyCompany.UI.Controls.AutoCompleteExtender = new function() {
    /// <summary>
    /// An extension of the autcomplete control.
    /// </summary>

    // Private Members
    var _this = this;

    // Public Members
    this.charsBeforeShowingTooltip = 2; // Change this value via server-side code if
                                        // clients want different values.

    this.showTooltip = function() {
        var item;

        if (this.value.length === _this.charsBeforeShowingTooltip) {
            // Explicitly show the tooltip after two characters have been entered.
            alert('show the tooltip explicitly');
        }
    }
}

稍后在服务器端生成的代码中,以下JavaScript呈现到页面

$(document.ready(function() {
    $('#someClientId').bind('keyup', MyCompany.UI.Controls.AutoCompleteExtender.showTooltip);
});

现在这一切工作,除了我不知道如何显式显示工具提示插件。我试过以下方法,但都不管用:

...
        this.showTooltip = function() {
            var item;

            if (this.value.length === _this.charsBeforeShowingTooltip) {
                // Explicitly show the tooltip after two characters have been entered.
                $(this).hover(); // doesn't work
                $(this).trigger('mouseover'); // doesn't work
                $(this).trigger('mouseenter'); // doesn't work
            }
        }
...

我还尝试添加CSS类 show-tooltip (这是从谷歌得到的),但这也不管用。

除了修改插件,有没有一种现成的方法?

1 回复 | 直到 16 年前

nickytonline 16 年前

有几个问题。我认为有标题标签的控件没有(总是先检查明显的!)。title标记实际上位于表行上,而不是表单元格中的控件。好吧,这就触发了mouseover,但是当我显式触发mouse-over事件时,jQuery工具提示插件抛出了一个错误事件.pageX以及事件.pageY未定义。

它们未定义的原因是因为事件是显式激发的,因此没有X/Y坐标从鼠标传递到事件对象中。所以我所做的就是修改jQuery工具提示插件来检查这些是否也未定义。如果它们是助手.父级而使用工具提示插件中的控件。

以下是我在工具提示插件中修改的代码:

/**
 * callback for mousemove
 * updates the helper position
 * removes itself when no current element
 */
function update(event)  {       
    // ... code omitted for clarity

    // if (event) { // This was the old check
    if (event && typeof(event.pageX) !== "undefined" &&  typeof(event.pageY) !== "undefined") {
        // ... more code omitted for clarity
    }

    // ... even more code omitted for clarity
}

再次感谢Joern Zaefferer创建这个插件, http://bassistance.de/jquery-plugins/jquery-plugin-tooltip