CRM 2011: Change disabled button tooltip text

Guys, this is a nice one, just finished it! And I am quite happy with it.
When a button is disabled, your users will – and with reason – sometimes wonder why. The most logical place to display the reasons is in the tooltip, at least I think so.

So, how to do that?

1. In the function enabling/disabling the button, prepare a string with the reason(s)

2. Find the button id, using chrome or firefox web developer tools

3. More difficult, find the existing tooltip box id. Not so easy as it disappears as soon as the mouse leaves the button… Simple anyway: with Chrome dev tools open in a separate window, bring that window just under your disabled button, even covering it a little. So that moving the mouse on the button shows the tooltip, and that you can then switch to the dev window with the tooltip still open. In the elements tab, scroll down to the bottom, and watch a nice <span> element show, that looks like below. Copy the id and replace¬†TOOLTIPID with it in the javascript code.

 

<span unselectable=”on” class=”ms-cui-tooltip” id=”new_entity|NoRelationship|Form|ipm.Form.new_entity.MyButton_ToolTip” role=”tooltip” aria-hidden=”false” style=”visibility: visible; position: absolute; top: 135px; left: 286px; min-width: 210px;”>
<div unselectable=”on” class=”ms-cui-tooltip-body”>
<div unselectable=”on” class=”ms-cui-tooltip-glow”>
<h1 unselectable=”on”>Temporary Suspension</h1>
<div unselectable=”on” class=”ms-cui-tooltip-description”>Temporary Suspension Description</div>
<div unselectable=”on” class=”ms-cui-tooltip-clear”></div>
<hr unselectable=”on”>
<div unselectable=”on” class=”ms-cui-tooltip-footer”>
<span unselectable=”on” class=” ms-cui-img-16by16 ms-cui-img-cont-float” style=”vertical-align: top;”></span>
<div unselectable=”on”>This button is currently disabled.</div>
</div>
<div unselectable=”on” class=”ms-cui-tooltip-description” style=”width: 90%;”>You may not have selected the item that works with this feature. If you do not have permissions to use this feature, contact your system administrator.</div>
</div>
</div>
</span>

 

4. Before returning true or false, if false, call this function, with the message. Replace BUTTONID with the appropriate value. It will be something long and with pipes (|) in it

function showDisabledReason(msg) {

// Get button
var link = window.parent.document.getElementById(‘BUTTONID’);

// Add custom tooltip
$(link, window.parent.document).hover(
function() { tryShowReason(msg); },
function() { }
);
return;

}

 

function tryShowReason(msg) {

var tooltip = manageToolTip(msg);
if (!tooltip) {
setTimeout(function () {
tryShowReason(msg);
}, 200);
}

}
function manageToolTip(msg) {
var tip = window.parent.document.getElementById(‘TOOLTIPID’);
if (tip) replaceToolTip(tip, msg);
return tip;
}
function replaceToolTip(tooltip, msg) {
$(tooltip).find(‘.ms-cui-tooltip-description:nth(1)’).html(msg);
}

 

And you’re done!!!