Change color of tooltip in WAB

[joerodmey]

Have a tooltip that works well. Just having some trouble to effectively change the text color. Code can be found below

// create node for the tooltip
          var tip = "Click on problem location";
          var tooltip = dojo.create("div", { "class": "tooltip", "innerHTML": tip }, map.container);
          dojo.style(tooltip, "position", "fixed");

          // update the tooltip as the mouse moves over the map
          dojo.connect(map, "onMouseMove", function(evt) {
            var px, py;        
            if (evt.clientX || evt.pageY) {
              px = evt.clientX;
              py = evt.clientY;
            } else {
              px = evt.clientX + dojo.body().scrollLeft - dojo.body().clientLeft;
              py = evt.clientY + dojo.body().scrollTop - dojo.body().clientTop;
            }
                           
            // dojo.style(tooltip, "display", "none");
            tooltip.style.display = "none";
            dojo.style(tooltip, { left: (px + 15) + "px", top: (py) + "px" });
            // dojo.style(tooltip, "display", "");
            tooltip.style.display = "";
            // console.log("updated tooltip pos.");
          });

          // hide the tooltip the cursor isn't over the map
          dojo.connect(map, "onMouseOut", function(evt){
            tooltip.style.display = "none";
          });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Joe,

  Sure just add the style properties to the in line style.

CSS font-size property 

CSS font-weight property 

[joerodmey]

Tried the following and didn't achieve the desire results. Guessing its a syntax issue

var tooltip = dojo.create("div", { "class": "tooltip", "innerHTML": tip, "style": "color: red", font-size:15px}, map.container);‍

[RobertScheitlin__GISP · Accepted solution]

var tooltip = dojo.create("div", { "class": "tooltip", "innerHTML": tip, "style": "color: red; font-size:15px;"}, map.container);‍‍