Javascript YUI工具提示未显示在面板顶部

当前，在显示之前创建的YUI面板后，尝试在其顶部显示YUI工具提示时遇到问题。问题是该面板无法注册到overlay manager，因为它需要大量代码进行更改和测试，从而延长了一个艰难的截止日期。要使其工作，唯一的方法是在显示面板后设置工具提示。问题是附加另一个函数调用时必须进行大量代码更改。我的问题是，我希望我可以使用事件处理来使用

“showEvent”

，但我似乎无法让它工作（我为字数计算道歉）：

我似乎只有通过运行类似于

successfulsecenario（）

的东西才能让它工作。我来自jQuery的背景，所以我还在学习YUI。我希望能够扩展YAHOO.widget.Panel的

show（）

函数来调用

createTooltip

，但我不是一个大师，或者我可能需要更改一个非常大的代码库才能做到这一点

function createTooltip() {
    var tooltipEl = document.createElement('DIV');
    panel_obj.get('element').appendChild(tooltipEl);
    window[tooltip_name] = new YAHOO.widget.Tooltip(tooltipEl, {
        context: element_id,
        xyoffset: [15, -15],
        zIndex: 999
    });
}

这将确保工具提示div是在对话框中创建的，而不是在文档体中创建的，从而确保它不会显示在对话框下方

此外，如果要扩展panel类，只需执行以下操作

function MyPanel(el, config) {
   MyPanel.superclass.constructor.apply(this, arguments);
   this.createToolTip();
}

YAHOO.lang.extend(MyPanel, YAHOO.widget.Panel , {
   createToolTip: function () {
       // create tool tip here
       this.on('show', this.showTooltip, this, true);
   },
   showToolTip: function () {this.toolTip.show();}
});

尝试对工具提示配置使用“容器”属性（因此容器将是面板的元素）：

这是一个快速的解决方案，使用show事件和/或扩展类会很好，但必须运行，如果您仍然需要帮助，我会回来查看（同时检查我用您的代码制作的示例）。

函数getPanelIDFromElementID（元素id）{
var parent_panel=YAHOO.util.Dom.getAncestorByClassName（元素_id，'yui panel'）；
var parent_id=null；
if（父面板）{
parent_id=parent_panel.id；
}
返回父项id；
}
函数createTooltips（）{
var tooltip_elements=YAHOO.util.Dom.getElementsByClassName（'tooltip'）；
对于（变量i=0；i

是否仍可以将其附加到“showEvent”活动中？是的。。。您可以这样做（在创建工具提示中）this.on（'show'，function（）{/*调用工具提示上的show function*/}，this，true）；如果我对一个面板只使用一个函数，这将起作用，但问题是我试图让createTooltip查找所有类名为“tooltip”的元素然后添加YAHOO.widget.Tooltip的新实例，但我非常喜欢您的示例和下面的示例，因为它让我更了解YAHOO如何定义其库。作为补充说明，应用程序中的每个小部件都有许多面板可供使用，每个小部件中都有许多需要作为工具提示的元素。我删除了以前的示例断言设置容器正是让我的问题正常工作所需要的。很酷，很好的替代解决方案，也许比我的要简单一点。

function MyPanel(el, config) {
   MyPanel.superclass.constructor.apply(this, arguments);
   this.createToolTip();
}

YAHOO.lang.extend(MyPanel, YAHOO.widget.Panel , {
   createToolTip: function () {
       // create tool tip here
       this.on('show', this.showTooltip, this, true);
   },
   showToolTip: function () {this.toolTip.show();}
});

function createTooltip() {
    window[tooltip_name] = new YAHOO.widget.Tooltip(tooltip_name, {
        container: panel_obj.element,
        context: element_id,
        xyoffset: [15, -15]
    });
}

function getPanelIDFromElementID (element_id) {
    var parent_panel = YAHOO.util.Dom.getAncestorByClassName(element_id, 'yui-panel');
    var parent_id = null;
    if (parent_panel) {
        parent_id = parent_panel.id;
    }
    return parent_id;
}
function createTooltips() {
    var tooltip_elements = YAHOO.util.Dom.getElementsByClassName('tooltip');

    for (var i = 0; i < tooltip_elements.length; i++) {
        var ele_id = tooltip_elements[i].getAttribute('id');
        var name = ele_id.charAt(0).toLowerCase() + ele_id.slice(1);
        var nameArray = name.split("_");

        for (var x=1; x < nameArray.length; x++) {
            nameArray[x] = nameArray[x].charAt(0).toUpperCase() + nameArray[x].slice(1);
        }

        var elementName = nameArray.join('');

        window[elementName] = new YAHOO.widget.Tooltip(elementName, {
            context: escape(ele_id),
            xyoffset: [15, -15],
            zIndex: 999,
            container: getPanelIDFromElementID(ele_id)
        });
    }
}