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,

  What does your 

tooltip

css class look like?

[joerodmey]

.introjs-tooltip {
  box-sizing: content-box;
  position: absolute;
  visibility: visible;
  padding: 10px;
  background-color: white;
  min-width: 200px;
  max-width: 300px;
  border-radius: 3px;
  box-shadow: 0 1px 10px rgba(0,0,0,.4);
  -webkit-transition: opacity 0.1s ease-out;
     -moz-transition: opacity 0.1s ease-out;
      -ms-transition: opacity 0.1s ease-out;
       -o-transition: opacity 0.1s ease-out;
          transition: opacity 0.1s ease-out;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Joe,

  That is not the css class that is being used. It is only using the “tooltip” css class.

[joerodmey]

I don't have a css class then

[joerodmey]

Can I apply a color to this tooltip inline to my code?

[RobertScheitlin__GISP]

Joe,

  Add a css rule called "tooltip" to your app then:

.tooltip {
  color: blue;
}‍‍‍

[joerodmey]

How can the css be included inline?

[RobertScheitlin__GISP]

Joe,

  I assume you mean inline style (as css rules can not go inline).

var tooltip = dojo.create("div", { "class": "tooltip", "innerHTML": tip, "style": "color: blue" }, map.container);

[joerodmey]

Perfect thanks!

Can the same text be bolded and size increased?