Question

我正在使用jQuery Tooltip控件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（从Google获得），但这也不起作用。

除了修改插件外，还有办法开箱即用吗？

Answer 1

那么有几个问题。我认为有标题标签的控件没有（总是首先检查明显的！）。标题标签实际上在表格行上，而不是表格单元格中的控件。好的，所以让鼠标悬停触发，但是当我明确地将鼠标悬停在事件上时，jQuery Tooltip插件抛出了一个错误，即event.pageX和event.pageY未定义。

它们未定义的原因是因为事件是显式触发的，因此鼠标中的事件对象中没有传递X / Y坐标。所以我做的是修改jQuery Tooltip插件以检查它们是否也是未定义的。如果它们是使用Tooltip插件中的helper.parent控件的offsetLeft和offsetTop属性。

以下是我在Tooltip插件中修改的代码：

/**
 * 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。

显式显示jQuery.Tooltip插件

1 个答案: