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

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

  •  0
  • nickytonline  · 技术社区  · 15 年前

    我正在使用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 回复  |  直到 15 年前
        1
  •  0
  •   nickytonline    15 年前

    有几个问题。我认为有标题标签的控件没有(总是先检查明显的!)。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