Claro: arrows in dijit.TooltipDialog background

[samlin99]

After execute following code, you will see unknown characters display in TooltipDialog?. Please check attached pic for more reference.

Sample Code:

var dialog = new dijit.TooltipDialog({
    content: 'Test'
});
for(x=0;x<70;x++)
{
	dojo.create("div", {innerHTML:"Test"}, dialog.containerNode);
}
var button = new dijit.form.DropDownButton({
    label: "show tooltip dialog",
    dropDown: dialog
});
dojo.byId("dropdownButtonContainer").appendChild(button.domNode);

[samlin99]

Unknown characters display in TooltipDialog?

[bill]

For some reason there's this CSS rule in claro:

.claro .dijitTooltipContainer {
...
background-image:url("images/tooltip.png");
background-position:-575px 100%;
background-repeat:repeat-x;
...
}

That tooltip.png has the arrows in it.

[bill]

Turns out tooltip.png is combining the gradient background at the bottom of a tooltip (see below) with the connector arrows from the tooltip pointing to the "around node":

As a workaround you could do this after including claro:

<style>
.claro .dijitTooltipContainer {
    background-image: none;
}
</style>

[bill]

(In [23085]) Fix issue when arrows appear inside the tooltip (for very tall tooltips). Happened because the gradient was stored in the same image files as the arrows.

Fix from Jason Enzi (IBM, CCLA), fixes #11779.

[bill]

(In [23103]) Backport tooltip embedded arrow fix to 1.5 branch, and add file missing from trunk checkin [23085], refs #11779.