Home/ Questions/Q 7557767
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T12:13:08+00:00

I couldn’t find an answer anywhere on the Web, so I’m going to answer

  • 0

I couldn’t find an answer anywhere on the Web, so I’m going to answer my own question: How do I override the internal padding of the TooltipDialog popup?

The challenge:
When using dijit.TooltipDialog there is internal padding of 6px 8px 8px 6px assigned to the class dijitTooltipContainer from the Claro style sheet. I use several tooltips on the same page, and only wanted to remove this padding from one (thus, didn’t want to override the default stylesheet). This particular ToolTip contains a stylized unordered list of of right justified numbers from 0-100 in increments of 5, and the extra padding from dijitTooltipContainer was far too much.

Unfortunately, the following doesn’t work, only affecting the parent element (and making a mess of it at that):

var dialog = new dijit.TooltipDialog({
        content: string,
        style: "padding: 0;",
        id: "newDialog"
    },"");

The answer: Here’s how I changed the internal padding to 0 (using JavaScript):

// 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");

  // Get all the 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"});

Maybe someone else has a better way of doing this that is so obvious, I couldn’t find it. Hah.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When I work with Dojo, I setup a custom theme and use both the claro (or any other that is shipped) and my custom theme. I then setup any of these overrides in my custom theme.

    <body class="claro myTheme">

    So if I wanted to override all tooltips, I could have this in my css

    .myTheme .dijitTooltipContainer {
    padding: 0;
}

    But you only want to override one, so you could do this

    // Create the ToolTip
var dialog = new dijit.TooltipDialog({
    content: string,
    id: "newDialog"
},"");
dojo.addClass(dialog.domNode, 'noPadding');

    and the css

    .myTheme .noPadding .dijitTooltipContainer {
    padding: 0;
}
    • 0