Focal Point
[SOLVED] HTML5 JSCHART - Overriding ToolTip Styling.

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/4007025376

November 12, 2014, 10:38 PM
David Briars
[SOLVED] HTML5 JSCHART - Overriding ToolTip Styling.
When I run the following code I see the default ToolTip style (yellow border/light yellow background:
 
APP PREPENDPATH IBISAMP
DEFINE FILE GGSALES
 MYXAXIS/I5 = DECODE SEQ_NO(1 1
                            2 2
 	                    3 3);
 MYYAXIS/I5 = DECODE SEQ_NO(1 1
                            2 2
			    3 3);
END
-*
GRAPH FILE GGSALES
SUM    MYYAXIS
BY     ST
ACROSS MYXAXIS
IF SEQ_NO LE 4
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 1
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH SCATTERS
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_JS
htmlToolTip: {enabled: true,
              snap: true
             }
*END
END 

I then override the styling using a string defining CSS properties:
  
APP PREPENDPATH IBISAMP
DEFINE FILE GGSALES
 MYXAXIS/I5 = DECODE SEQ_NO(1 1
                            2 2
 	                    3 3);
 MYYAXIS/I5 = DECODE SEQ_NO(1 1
                            2 2
			    3 3);
END
-*
GRAPH FILE GGSALES
SUM    MYYAXIS
BY     ST
ACROSS MYXAXIS
IF SEQ_NO LE 4
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 1
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH SCATTERS
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
-*
-* Create Data Labels and Tool Tips.
-*
*GRAPH_JS
htmlToolTip: {enabled: true,
              snap: true,
              style: { border: 'solid red', background: 'lavender'},
             }
*END
ENDSTYLE
END

Unfortunately, the little 'pointer arrow' remains 'yellow'.

Here is a screenshot of both instances:


Any idea on how to style the 'pointer'?

This message has been edited. Last edited by: <Kathryn Henning>,




Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster
November 13, 2014, 02:03 AM
njsden
That pointer is added by the "snap" option of the tooltip but is actually rendered as an additional <span> element right next to the tooltip's text.

/* See your "border: red" and "background: lavender" were pushed to the style setting of the main tooltip */
<span id="tdgchart-tooltip" class="tdgchart-tooltip" style="<many settings here>; border: solid red; background: rgb(230, 230, 250);">

   /* Tooltip text */
   (MA 2, MYXAXIS 2)

   /* "Pointer" added by the snap option */
   <span class="tooltipCallout" style="position: absolute; width: 0px; height: 0px; border-width: 10px; border-style: solid; 
         border-color: transparent transparent transparent rgba(243, 219, 63, 0.933333); top: 0.952380952380954%; left: 100%;">
   </span>
</span>


htmlToolTip's documented style options only flows to the "tdgchart-tooltip" <span> element, not to the additional "tooltipCallout" one which is the actual pointer you want to change. Frowner

quote:

Parameters:

enabled: true/false enables/disables HTML-based tool tips. true = use HTML-based (div) style tooltip for any chart tooltips. false = use standard style tooltips.

mouseMargin: Distance from top of cursor to bottom of tooltip, in pixels.

style: undefined, 'seriesFill', or an object or string defining CSS properties.

autoTitleFont: When series.tooltip is set to 'auto', use a CSS font string to define the formatting of automatic tooltip title text. The default value is 'bold 12pt Sans-Serif'.

autoContentFont: When series.tooltip is set to 'auto', use a CSS font string to define the formatting of automatic tooltip content text. The default value is '10pt Sans-Serif'.

snap: true/false enables/disables snapping tooltips.

sticky: true/false enables/disables sticky tooltips. If false (the default), the tooltip is hidden when the mouse moves off any riser. If true, the tooltip is only hidden when the mouse moves out of the chart frame.




Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
November 13, 2014, 10:51 AM
David Briars
Thank you for your analysis and review njsden!

I've now added the !important directive to the tooltipCallout class, to not display the callout.

I think this looks nice, although of course, a case can be built that a non-yellow callout would look nice too. :-)

(I couldn't figure out how to override the color of the callout, if someone else can, that would be great to take a look at.)

Once again, many thanks.



APP PREPENDPATH IBISAMP
DEFINE FILE GGSALES
 MYXAXIS/I5 = DECODE SEQ_NO(1 1
                            2 2
 	                        3 3);
 MYYAXIS/I5 = DECODE SEQ_NO(1 1
                            2 2
			                3 3);
END
-*
GRAPH FILE GGSALES
SUM    MYYAXIS
BY     ST
ACROSS MYXAXIS
IF SEQ_NO LE 4
ON GRAPH HOLD AS MYGRAPH FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 1
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH SCATTERS
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
-*
-* Create Data Labels and Tool Tips.
-*
*GRAPH_JS
htmlToolTip: {enabled: true,
              snap: true,
              style: { border: 'solid red', background: 'lavender'},
             }
*END
ENDSTYLE
END
-RUN
-HTMLFORM BEGIN
<!DOCTYPE html>
<HTML>
<HEAD>
 <TITLE></TITLE>
 <style>
  .tooltipCallout {
    display:none!important;
  }
 </style>
</HEAD>
-*
<BODY>
 !IBI.FIL.MYGRAPH;
</BODY>
</HTML>
-HTMLFORM END

This message has been edited. Last edited by: David Briars,
November 13, 2014, 03:56 PM
njsden
Funny Smiler I tried working out an example like that last night but got discouraged by 2 things:

1) The pointer is sometimes rendered "pointing" to the right, sometimes pointing to the left, so overriding the style by a higher-level .tooltipCallout ws not really feasible.

2) I noticed that HOLDing the JSCHART actually creates a complete HTML document with it's own JavaScript and CSS links and I got worried that embedding an HTML document inside of another HTML document may have broken the "validity" of the HTML5 document and perhaps impact the JSCHART interaction. I'm glad you were not the coward I was and actually went ahead and tried it Big Grin



Prod/Dev: WF Server 8008/Win 2008 - WF Client 8008/Win 2008 - Dev. Studio: 8008/Windows 7 - DBMS: Oracle 11g Rel 2
Test: Dev. Studio 8008 /Windows 7 (Local) Output:HTML, EXL2K.
December 10, 2014, 04:57 PM
<nick z>
Hi David,
I want to make sure you get this workaround:

APP PREPENDPATH IBISAMP
DEFINE FILE GGSALES
MYXAXIS/I5 = DECODE SEQ_NO(1 1
                            2 2
                                   3 3);
MYYAXIS/I5 = DECODE SEQ_NO(1 1
                            2 2
                                                    3 3);
END
-*
GRAPH FILE GGSALES
SUM    MYYAXIS
BY     ST
ACROSS MYXAXIS
IF SEQ_NO LE 4
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 1
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH SCATTERS
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
-*
-* Create Data Labels and Tool Tips.
-*
*GRAPH_JS

  htmlToolTip: {
    enabled: true, snap: true,
    style: { borderStyle: 'solid', borderColor: 'red', background: 'lavender'}
  },
  _callbackList: [{callback: function() {
    var o = tdgchart.prototype.snapToolTip;
    tdgchart.prototype.snapToolTip = function() {
      o.apply(this, Array.prototype.slice.call(arguments));
      var bc = this.htmlToolTip.style.borderColor, c = document.getElementsByClassName('tooltipCallout')[0];
      if (c) {
        c.style.borderLeftColor = c.style.borderLeftColor === 'transparent' ? 'transparent' : bc;
        c.style.borderRightColor = c.style.borderRightColor === 'transparent' ? 'transparent' : bc;
      }
    }
  }, event: 'renderComplete'}]



*END
ENDSTYLE
END




Please let me know if this works.

Thanks.
Nick.
December 11, 2014, 09:46 AM
David Briars
Thank you Nick!

The 'adding properties to the snapToolTip prototype' workaround worked fine for me.

Both the model in my first post, and my real JSCHART scatterchart, are showing the pointer with the same color as the border.

Thank you again.
December 11, 2014, 09:54 AM
<nick z>
Great!
In the next WF release you will be able to use much simpler code:

htmlToolTip: {enabled: true,

              snap: true,
border: {color: 'red'},
              style: { border: 'solid red', background: 'lavender'},
             }



Thank you.
Nick.