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

Question

当前在显示先前创建的 YUI 面板后，尝试让 YUI 工具提示显示在 YUI 面板顶部时遇到问题。问题是面板无法注册到覆盖管理器，因为这需要更改和测试大量代码，从而延长硬性截止日期。使其发挥作用的唯一方法是在显示面板后设置工具提示。问题是需要进行大量的代码更改才能附加另一个函数调用。我的问题是我希望我可以使用事件处理来使用 "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

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

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

这是快速解决方案，使用显示事件和/或扩展类会很好，但如果您仍然需要帮助，则必须运行，我会回来检查（还要检查我用您的代码制作的示例 http://jsfiddle.net/3GWaM /2/ ）。

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