Hello all

I have a custom tooltip as in the code below. This code is working fine if I remove "WRAP=2.50" on column N3. But I need to specify the width of that column, then it is not working.
Can anyone please suggest if I can do something else?

 TABLE FILE CAR
SUM
	COMPUTE SALES_CHK/A3        = IF (SALES GT 50000) THEN 'Yes' ELSE 'No'; NOPRINT
	COMPUTE SALES_DISPLAY/A1000 = '<div class="tooltip" title="'| 'Value 1: ' |SALES_CHK| CHAR(13)| 'Value 2: ' |SALES_CHK|'">'|FPRINT(SALES,'P8C','A10')|'</div>'; AS ''
BY COUNTRY AS ''
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET HTMLCSS ON
ON COUNTRY SKIP-LINE
ON TABLE SET STYLE *
TYPE=REPORT, GRID=OFF, FONT='ARIAL', SIZE=12, STYLE=NORMAL, SQUEEZE=ON, $
TYPE=REPORT, COLUMN=N1, BORDER=OFF, WRAP=1.50, $
TYPE=REPORT, COLUMN=N3, BORDER=OFF, WRAP=2.50, $
TYPE=DATA, COLUMN=N3, BACKCOLOR=RGB(200 200 200), COLOR=BLACK, JUSTIFY=CENTER, $
ENDSTYLE
END 

Thank you.

This message has been edited. Last edited by: WebFOCUS_Dev,

Works for me (WF 8.202)

quote:

Originally posted by Danny-SRL:
Works for me (WF 8.202)

Interesting. I am on 8.2.06 and having issue. Can I open a ticket for this? I am not sure if IBI will accept as this is custom code.

Yes you can open a case.

I took your code and added some CSS code, to control the column width, via -HTMLFORM.

TABLE FILE CAR
SUM
	COMPUTE SALES_CHK/A3        = IF (SALES GT 50000) THEN 'Yes' ELSE 'No'; NOPRINT
	COMPUTE SALES_DISPLAY/A1000 = '<div class="tooltip" title="'| 'Value 1: ' |SALES_CHK| CHAR(13)| 'Value 2: ' |SALES_CHK|'">'|FPRINT(SALES,'P8C','A10')|'</div>'; AS ''
BY COUNTRY AS ''
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET HTMLCSS ON
ON COUNTRY SKIP-LINE
ON TABLE SET STYLE *
TYPE=REPORT, GRID=OFF, FONT='ARIAL', SIZE=12, STYLE=NORMAL, SQUEEZE=ON, $
TYPE=REPORT, COLUMN=N1, BORDER=OFF, WRAP=1.50, $
-*TYPE=REPORT, COLUMN=N3, BORDER=OFF, WRAP=2.50, $
TYPE=DATA, COLUMN=N3, BACKCOLOR=RGB(200 200 200), COLOR=BLACK, JUSTIFY=CENTER, $
ENDSTYLE
END 
-RUN
-HTMLFORM BEGIN
<style>
.tooltip { 
  width: 500px;
}
</style>
-HTMLFORM END  

Thanks David. This worked for me. I am trying to applying some styling to the tooltip with custom font family/color/size and tooltip box border color/width etc. But I am seeing both unstyled and styled tooltips when I hover.
I think this is also depending on WebFOCUS version we are on.

quote:

Originally posted by David Briars:
I took your code and added some CSS code, to control the column width, via -HTMLFORM.

TABLE FILE CAR
SUM
	COMPUTE SALES_CHK/A3        = IF (SALES GT 50000) THEN 'Yes' ELSE 'No'; NOPRINT
	COMPUTE SALES_DISPLAY/A1000 = '<div class="tooltip" title="'| 'Value 1: ' |SALES_CHK| CHAR(13)| 'Value 2: ' |SALES_CHK|'">'|FPRINT(SALES,'P8C','A10')|'</div>'; AS ''
BY COUNTRY AS ''
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET HTMLCSS ON
ON COUNTRY SKIP-LINE
ON TABLE SET STYLE *
TYPE=REPORT, GRID=OFF, FONT='ARIAL', SIZE=12, STYLE=NORMAL, SQUEEZE=ON, $
TYPE=REPORT, COLUMN=N1, BORDER=OFF, WRAP=1.50, $
-*TYPE=REPORT, COLUMN=N3, BORDER=OFF, WRAP=2.50, $
TYPE=DATA, COLUMN=N3, BACKCOLOR=RGB(200 200 200), COLOR=BLACK, JUSTIFY=CENTER, $
ENDSTYLE
END 
-RUN
-HTMLFORM BEGIN
<style>
.tooltip { 
  width: 500px;
}
</style>
-HTMLFORM END  

quote:

...I think this is also depending on WebFOCUS version we are on...

The only thing I saw release dependent in your code was the CHAR function. I believe CHAR is new in 82. Consider using the line-break tag.

quote:

...I am trying to applying some styling to the tooltip with custom font family/color/size and tooltip box border color/width etc...

I would consider using CSS to style the tooltip..

TABLE FILE CAR
"Sales Check"
SUM
 COMPUTE SALES_CHK/A3        = IF (SALES GT 50000) THEN 'Yes' ELSE 'No'; NOPRINT
 COMPUTE SALES_DISPLAY/A24   = FPRINT(SALES,'P8C','A10'); NOPRINT
 COMPUTE TOOLTIP_TEXT/A200V  = 'Value 1: ' | SALES_CHK || '<BR>' || 'Value 2: ' | SALES_CHK ; NOPRINT
 COMPUTE DISPLAYOUTPUT/A600V = '<div class="displaycolumn">' || SALES_DISPLAY || '<span class="tooltiptext">' || TOOLTIP_TEXT ||  '</span> </div>'; AS ''
-* 
BY COUNTRY AS ''
ON COUNTRY SKIP-LINE
-*
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
TYPE=REPORT, GRID=OFF, FONT='ARIAL', SIZE=12, STYLE=NORMAL , $
TYPE=DATA, COLUMN=DISPLAYOUTPUT, JUSTIFY=CENTER,
 BACKCOLOR=RGB(200 200 200), COLOR=BLACK, $
ENDSTYLE
END
-RUN
-*
-HTMLFORM BEGIN
<style>
 .displaycolumn {
  width: 500px;
 }

 .tooltiptext {
  visibility: hidden;
  width: 100px;
  background-color: red;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-family: calibri;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
 }

 .displaycolumn:hover .tooltiptext {
  visibility: visible;
 }
</style>
-HTMLFORM END  

quote:

Originally posted by David Briars:

quote:

...I think this is also depending on WebFOCUS version we are on...

The only thing I saw release dependent in your code was the CHAR function. I believe CHAR is new in 82. Consider using the line-break tag.

quote:

...I am trying to applying some styling to the tooltip with custom font family/color/size and tooltip box border color/width etc...

I would consider using CSS to style the tooltip..

Thanks a lot David. This is working. I will take it from here. Code I had was different.