YUI工具提示不显示在Panel顶部

Question

目前在尝试将YUI工具提示显示在YUI面板之后显示以前创建时，会出现问题。问题是Panel无法注册到覆盖管理器，因为它需要更改和测试TON代码，以延长硬截止日期。 的唯一方法是在显示Panel后设置工具提示。问题是，为了附加另一个函数调用，必须进行大量的代码更改。我的问题是我希望我可以使用事件处理来使用"showEvent"，但我似乎无法让它工作（我为字数而道歉）：

var panel_obj = new YAHOO.widget.Panel('someID', {
    width: "700px",
    height: "500px",
    close: true,
    draggable: false,
    modal: true,
    constraintoviewport: true,
    visible: false,
    fixedcenter: true 
});
panel_obj.render();

var tooltip_name = 'newTooltip1';
var element_id = 'htmlElementIDToBecomeTooltip';

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

function successfulScenario() {
    panel_obj.show();
    createTooltip();
}

function failedScenario1() {
    YAHOO.util.Event.addListener(
        'someID',
        "showEvent",
        createTooltip
    );
}

function failedScenario2() {
    createTooltip();
    panel_obj.show();
}

我似乎唯一能让它发挥作用的方法是运行successfulScenario()之类的东西。我来自jQuery背景，所以我还在学习YUI。我希望能够扩展（子类）YAHOO.widget.Panel的show()函数来调用createTooltip，但我不是那么多的大师，或者我可能需要更改一个非常大的代码库来做它。

Answer 1

尝试使用tooltip配置的“container”属性（因此容器将是面板的元素）：

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

这是快速的解决方案，使用show事件和/或扩展类会很好但是必须运行，如果你仍然需要帮助，我会回来检查（同时检查我用你的代码做的例子{{ 3}}）。

Answer 2

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，确保它不会出现在对话框下方。

此外，如果您想扩展面板类，请执行以下操作

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();}
});

Answer 3

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)
        });
    }
}