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

【问题标题】：YUI Tooltip not displaying on top of PanelYUI 工具提示未显示在面板顶部
【发布时间】：2011-03-01 15:47:15
【问题描述】：

目前在尝试让 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，但我不是一个大师，或者我可能需要更改一个非常大的代码库才能做到这一点.

【问题讨论】：

标签： javascript events yui tooltip panel

【解决方案1】：

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

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

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

【讨论】：

如果我只对一个面板使用一个函数，这将起作用，但问题是我试图让 createTooltip 找到类名为“tooltip”的所有元素，然后添加新的 YAHOO.widget 实例。工具提示，但我确实喜欢您的示例和下面的示例，因为它让我对 YAHOO 如何定义其库有更深入的了解。
附带说明一下，应用程序中的每个小部件都有许多面板可以在每个需要作为工具提示的元素中工作。
我删除了我之前的断言，设置容器正是解决问题所需要的。
酷，不错的替代解决方案，可能比我的复杂一点。

【解决方案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();}
});

【讨论】：

无论如何这可以附加到事件“showEvent”吗？
是的...你可以这样做（在创建工具提示中）this.on('show', function () {/* 在工具提示上调用显示函数*/}, this,真）；

【解决方案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)
        });
    }
}

【讨论】：