YUI工具提示不顯示在面板頂部

Question

當前顯示YUI工具提示顯示之前，YUI工具提示顯示在之前創建時出現問題。問題在於面板無法註冊到覆蓋層管理器，因爲它需要更改和測試代碼的TON，從而延長了最後期限。 到得到此工作的唯一方法是在顯示面板後設置工具提示。問題是附加其他函數調用時必須進行的代碼更改量較大。我的問題是，我希望我可以使用事件處理使用"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] 
    }); 
} 

這是一個快速的解決方案，使用show event和/或延長課程會很好，但必須運行，如果你仍然需要幫助，我會檢查回來（同時檢查我用你的代碼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) 
     }); 
    } 
}