With dark stylesheet, the popover in the ElevationProfile widget text stays dark, so that it is unreadable
See codepen below
https://codepen.io/christophesuter/pen/qBgxWBp
Does anyone have a workaround ? Or know which css variable is used for this ?
Solved! Go to Solution.
Hi @ChristopheSuter - this bug will be fixed in the next version of the API (v4.29). Thanks for reporting it!
This is a new bug in 4.28. The tooltip and its contents are not document elements, but are instead graphics rendered on a canvas element, so they're not controllable via CSS. The only workaround I have is to alter my locally hosted copy of the SDK.
The problem appears to occur in the "_updateTextColor" method of the undocumented esri/chunks/Tooltip module. I'm not sure if the problem is because the function is called when it shouldn't be, or because something in the function isn't working as intended. Either way, the function overrides the theme's font color with another color that doesn't stand out very well. It happens with the light theme too, which my apps use.
The construction of the Tooltip instance takes place in the esri/widgets/ElevationProfile/support/chartUtils module. It looks something like this:
const b = Q.Tooltip.new(c.root, {
forceHidden: !0,
getFillFromSprite: !1,
getLabelFillFromSprite: !1,
pointerOrientation: "vertical",
visible: !1
});
I've modified my local copy to include a property called "autoTextColor" with its value set to false like so:
const b = Q.Tooltip.new(c.root, {
autoTextColor: !1,
forceHidden: !0,
getFillFromSprite: !1,
getLabelFillFromSprite: !1,
pointerOrientation: "vertical",
visible: !1
});
This prevents the aforementioned "_updateTextColor" function from altering the label's color. I don't know of any better way to make this work, since there doesn't appear to be a way to get a reference to the Tooltip from the ElevationProfile widget.
@Noah-Sager perhaps you can add this one to the list...Happy Thanksgiving btw.
Hi @ChristopheSuter - this bug will be fixed in the next version of the API (v4.29). Thanks for reporting it!
Good to know this will be fixed in the new release. I assume we will still be unable to modify this color directly with CSS in the event we wanted a specific color?