Tuesday, June 2, 2009

Add Tooltip on disabled button


<div style="position:relative;text-align:right;">
<span id="Configure_overlay" style="z-index:2; position:absolute; background-color:white; opacity:0.60; filter:alpha(opacity=60); width:125px; height:20px; display:none;"></span>
<input type="button" name="Configure" id="configure" value="Configure" onclick="clickMe()"style="font-size: 7pt;width:125px">
</div>

The overlay must be absolute positioned to be placed right on top of the button. Because the default position is static which means overlay will occupy space in document flow. For postion:absolute, the element is removed from the document. The surrounding relative div is required to deal with scroll case. Without it, the overlay is relative to the body and is fixed whereas the button may move in a scrolling area.

function disableCustomConfig(rId, msg) {
var customConfigOverlay = document.getElementById("Configure_overlay");
var customConfigTooltip = new YAHOO.widget.Tooltip("customConfigTooltip", {
context:"Configure_overlay", text:msg, showDelay:0, hideDelay:0, disabled: false
});

customConfigOverlay.style.display = "";
customConfigTooltip.cfg.setProperty("text",msg);
}