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     [CLOSED] HTML Tooltip Styling Help

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[CLOSED] HTML Tooltip Styling Help
 Login/Join
 
BI_Developer
Platinum Member
posted
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,


WF 8.2.01 APP STUDIO
PDF,HTML,EXL2K,Active
 
Posts: 139 | Registered: July 21, 2011Report This Post
dbeagan
Platinum Member
posted Hide Post
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


WebFOCUS 8.2.06
 
Posts: 210 | Location: Sterling Heights, Michigan | Registered: October 19, 2010Report This Post
BI_Developer
Platinum Member
posted Hide Post
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


WF 8.2.01 APP STUDIO
PDF,HTML,EXL2K,Active
 
Posts: 139 | Registered: July 21, 2011Report This Post
dbeagan
Platinum Member
posted Hide Post
I tried it in IE, Edge, and Chrome. Works fine. However, I also tried it in the App Studio Internal Viewer and did see the behavior you describe, both the styled and unstyled tooltip.


WebFOCUS 8.2.06
 
Posts: 210 | Location: Sterling Heights, Michigan | Registered: October 19, 2010Report 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     [CLOSED] HTML Tooltip Styling Help

Copyright © 1996-2020 Information Builders