[CLOSED] HTML Tooltip Styling Help

October 06, 2020, 12:48 PM

BI_Developer

Hello all, I am working on adding custom tooltip to a column in HTML report. Can anyone help me with these below issues?

1. br tag is not working to get tooltip in 2 lines.
2. Customer styling of the box and text inside the box of tooltip.

TABLE FILE CAR
SUM
	COMPUTE SALES_CHK/A5 = IF (SALES GT 50000) THEN 'Yes' ELSE 'No'; NOPRINT
	COMPUTE TXT_1/A8 = 'Value1: '; NOPRINT
	COMPUTE SALES_DISPLAY/A1000 = '<div class="tooltip" title="'|TXT_1|SALES_CHK|' <br> '|TXT_1|SALES_CHK|'">'|PTOA(SALES,'(P8C)','A10')|'</div>'; AS 'Sales'
BY COUNTRY
ON TABLE SET PAGE-NUM OFF
ON TABLE HOLD FORMAT HTML
ON TABLE SET STYLE *
TYPE=DATA,COLUMN=P2,JUSTIFY=RIGHT,$
ENDSTYLE
END
-HTMLFORM BEGIN
<HTML>
<HEAD>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<style>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.htmlToolTip: {
    enabled: true,
    fill: white,
	style: {
      boxShadow: 3px 3px 3px #124e90,
      borderWidth: 3px,
	  borderColor: #124e90,
      borderRadius: 10px
}
</style>
</HEAD>
<BODY>
<DIV>!IBI.FIL.hold;</DIV>
<script>
$( function() {
    $("div[title]").tooltip({
       effect: 'slide',
       position: "center right",
       offset: [10, 25]
    });
});
</script>
</BODY>
</HTML>
-HTMLFORM END

Thank you..

This message has been edited. Last edited by: FP Mod Chuck,

October 07, 2020, 09:29 AM

dbeagan

How about this:

 TABLE FILE CAR
 SUM
 COMPUTE SALES_CHK/A5        = IF (SALES GT 50000) THEN 'Yes' ELSE 'No'; NOPRINT
 COMPUTE TXT_1/A8            = 'Value1: '; NOPRINT
 COMPUTE SALES_DISPLAY/A1000 = '<div class="tooltip" title="'|TXT_1|SALES_CHK| CHAR(13)|
	                        TXT_1|SALES_CHK|'">'|FPRINT(SALES,'P8C','A10')|'</div>'; 
	                        AS 'Sales'
      BY COUNTRY
 ON TABLE SET PAGE-NUM OFF
 ON TABLE HOLD FORMAT HTMTABLE
 ON TABLE SET STYLE *
 TYPE=DATA, COLUMN=SALES_DISPLAY, JUSTIFY=RIGHT, $
 ENDSTYLE
 END
 
-HTMLFORM BEGIN
 <html>
 <head>
 <style>
 div:hover {
     position: relative;
 }
 div.tooltip:hover:after {
     content: attr(title);
     position: absolute;
     width: 120px;
     padding: 5px 0;
     top:   30%;
     left: 110%;
     text-align: center;
     color: white;
     background-color: black;
     border-radius: 6px;
     z-index: 20;
 }
 </style>
 </head>
 <body>
 !IBI.FIL.hold;
 </body>
 </html>
-HTMLFORM END

October 07, 2020, 10:51 AM

BI_Developer

Hello Sir, styling looks good. But I am seeing both new and old tooltips when I hover over the field. Old tooltip is displaying after 2 seconds. This happened in IE and Chrome. Do you see this behavior?

quote:

Originally posted by dbeagan:
How about this:

 TABLE FILE CAR
 SUM
 COMPUTE SALES_CHK/A5        = IF (SALES GT 50000) THEN 'Yes' ELSE 'No'; NOPRINT
 COMPUTE TXT_1/A8            = 'Value1: '; NOPRINT
 COMPUTE SALES_DISPLAY/A1000 = '<div class="tooltip" title="'|TXT_1|SALES_CHK| CHAR(13)|
	                        TXT_1|SALES_CHK|'">'|FPRINT(SALES,'P8C','A10')|'</div>'; 
	                        AS 'Sales'
      BY COUNTRY
 ON TABLE SET PAGE-NUM OFF
 ON TABLE HOLD FORMAT HTMTABLE
 ON TABLE SET STYLE *
 TYPE=DATA, COLUMN=SALES_DISPLAY, JUSTIFY=RIGHT, $
 ENDSTYLE
 END
 
-HTMLFORM BEGIN
 <html>
 <head>
 <style>
 div:hover {
     position: relative;
 }
 div.tooltip:hover:after {
     content: attr(title);
     position: absolute;
     width: 120px;
     padding: 5px 0;
     top:   30%;
     left: 110%;
     text-align: center;
     color: white;
     background-color: black;
     border-radius: 6px;
     z-index: 20;
 }
 </style>
 </head>
 <body>
 !IBI.FIL.hold;
 </body>
 </html>
-HTMLFORM END