After searching all over the internet for an answer, I came up with my own solution to override the internal padding of the TooltipDialog popup. Here's how I did it:
The issue: The dijit.TooltipDialog applies a default internal padding of 6px 8px 8px 6px through the class dijitTooltipContainer in the Claro style sheet. I needed to remove this padding for a specific Tooltip that contained a styled unordered list of right-aligned numbers from 0-100 in increments of 5. The excessive padding was not desirable for this particular element.
I tried the following code snippet, but it only affected the parent element and caused messy results:
var dialog = new dijit.TooltipDialog({
content: string,
style: "padding: 0;",
id: "newDialog"
},"");
The solution: To set the internal padding to 0 using JavaScript, here's what I did:
// Create the ToolTip
var dialog = new dijit.TooltipDialog({
content: string,
id: "newDialog"
},"");
// Open the popup
dijit.popup.open({
around: "someNode",
orient: ["below"],
popup: dialog
});
// Remove the padding from dijitTooltipContainer
// Get our main Widget node
var mainNode = document.getElementById("newDialog");
// Retrieve all child DIV nodes created by Dojo
var divChildren = mainNode.getElementsByTagName("div");
// Set the element padding to zero
// dijitTooltipContainer is the first child node
dojo.attr(divChildren[0], "style", {padding: "0px"});
Perhaps there is a simpler or better way to achieve this, but I couldn't find one. It's always satisfying to solve a problem on your own!