Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] HTML5 JSCHART - Overriding ToolTip Styling.

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] HTML5 JSCHART - Overriding ToolTip Styling.
 Login/Join
 
Master
posted
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
 
Posts: 822 | Registered: April 23, 2003Report This Post
Virtuoso
posted Hide Post
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.
 
Posts: 1533 | Registered: August 12, 2005Report This Post
Master
posted Hide Post
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,
 
Posts: 822 | Registered: April 23, 2003Report This Post
Virtuoso
posted Hide Post
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.
 
Posts: 1533 | Registered: August 12, 2005Report This Post
<nick z>
posted
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.
 
Report This Post
Master
posted Hide Post
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.
 
Posts: 822 | Registered: April 23, 2003Report This Post
<nick z>
posted
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.
 
Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] HTML5 JSCHART - Overriding ToolTip Styling.

Copyright © 1996-2020 Information Builders