topic Re: Change color of tooltip in WAB in Web AppBuilder Custom Widgets Questions

Change color of tooltip in WAB

joerodmey — Sun, 12 Dec 2021 10:44:16 GMT

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";
          });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change color of tooltip in WAB

RobertScheitlin__GISP — Thu, 22 Nov 2018 23:50:51 GMT

Joe,

What does your

tooltip

css class look like?

Re: Change color of tooltip in WAB

joerodmey — Sun, 12 Dec 2021 10:44:19 GMT

.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;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Change color of tooltip in WAB

RobertScheitlin__GISP — Fri, 23 Nov 2018 16:00:56 GMT

Joe,

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

Re: Change color of tooltip in WAB

joerodmey — Fri, 23 Nov 2018 16:10:20 GMT

I don't have a css class then

Re: Change color of tooltip in WAB

joerodmey — Fri, 23 Nov 2018 20:37:56 GMT

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

Re: Change color of tooltip in WAB

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:44:22 GMT

Joe,

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

.tooltip {
  color: blue;
}‍‍‍

Re: Change color of tooltip in WAB

joerodmey — Mon, 26 Nov 2018 16:35:27 GMT

How can the css be included inline?

Re: Change color of tooltip in WAB

RobertScheitlin__GISP — Mon, 26 Nov 2018 16:59:41 GMT

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

Re: Change color of tooltip in WAB

joerodmey — Mon, 26 Nov 2018 17:29:18 GMT

Perfect thanks!

Can the same text be bolded and size increased?

Re: Change color of tooltip in WAB

RobertScheitlin__GISP — Mon, 26 Nov 2018 17:55:38 GMT

Joe,

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

CSS font-size property

CSS font-weight property

Re: Change color of tooltip in WAB

joerodmey — Mon, 26 Nov 2018 19:21:36 GMT

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);‍

Re: Change color of tooltip in WAB

RobertScheitlin__GISP — Mon, 26 Nov 2018 19:37:46 GMT

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