Hi,

how can i place a Hover/mouse over text on a column in AHTML report which basically talks about the description of the column.

For basic HTML, SET POPUPDESC = ON worked well.

Any help is greatly appreciated.

Thanks,
Keerthi

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

Here's an easy method showing code for adding Hover text to the column title and to the data for that column. You can even force hover text changes based on conditions. Works for AHTML/HTML.

To create a multi-line Hover Text, add &|#10 at the end of each text line break point. Try this out:

-SET &TITLE_MSG =
-  '<span style="cursor: default;" ' | 'title=''SALES QUOTA=50K''>SALES</span>';

TABLE FILE CAR
SUM
COMPUTE SALES_CHK/A32=IF SALES GT 50000 THEN 'HURRAY!&|#10;ABOVE QUOTA&|#10 :)' ELSE 'UH-OH!&|#10;BELOW QUOTA&|#10 :(';NOPRINT
COMPUTE SALES_DISPLAY/A75='<a title="'|SALES_CHK|'">'|PTOA(SALES,'(P8)','A10')|'</a>';AS '&TITLE_MSG'
BY COUNTRY
ON TABLE PCHOLD FORMAT AHTML
ON TABLE SET STYLE *
TYPE=DATA,COLUMN=P2,JUSTIFY=RIGHT,$
ENDSTYLE
END

Have fun!

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

I get an error while tring to execute this:

0 ERROR AT OR NEAR LINE 8 IN PROCEDURE delete FOCEXEC *
(FOC003) THE FIELDNAME IS NOT RECOGNIZED: QUOTA=50K'>SALES'
BYPASSING TO END OF COMMAND
(FOC009) INCOMPLETE REQUEST STATEMENT

Keerthi Honnur

Not quite sure what that piece of code is doing However it looks like a compute or define
I am thinking it should look like this:
QUOTA/A12 = '50K > SALES';

Is that what you were trying to correct?

quote:

Originally posted by Keerthi:
I get an error while tring to execute this:

0 ERROR AT OR NEAR LINE 8 IN PROCEDURE delete FOCEXEC *
(FOC003) THE FIELDNAME IS NOT RECOGNIZED: QUOTA=50K'>SALES'
BYPASSING TO END OF COMMAND
(FOC009) INCOMPLETE REQUEST STATEMENT

Kerthi, I cut and pasted the code above from my post with no changes and it worked as advertised. We are on version 7.6.11 and it works under the data server and MRE. I believe you've lost a quote somewhere. I can cause a similar error by removing the single quotes around

AS '&TITLE_MSG'

Can you reply to this with a direct cut and paste of your code?

quote:

Originally posted by Rhonda:
Not quite sure what that piece of code is doing However it looks like a compute or define
I am thinking it should look like this:
QUOTA/A12 = '50K > SALES';

Is that what you were trying to correct?

Rhonda, I understand your assumption but that piece of code is not a separate compute or define. It is all text used for display in the column title Hover Text "Sales Quota=50k", If you copy and paste my code above into a test fex with no changes and run it, happiness should abound.

Happiness abounded - This is an example of what happens when you have been administering FOCUS/WebFOCUS for 5 years. You lose alot of your application development skills! Thanks for the tip!
Rhonda

quote:

Originally posted by Rhonda:
Happiness abounded - This is an example of what happens when you have been administering FOCUS/WebFOCUS for 5 years. You lose alot of your application development skills! Thanks for the tip!
Rhonda

Excellent Rhonda!

I'm now looking at JQuery Tools and it's ToolTip plug-in see how I can jazz up these inherent browser based (boring) tool-tips. I'm making some progress so look for an update soon.

Keerthi,

I was getting the same error on 7.7.03.
I change the second line from:

 -  '<span style="cursor: default;" ' | 'title=''SALES QUOTA=50K''>SALES</span>';
 

To:

 -  '<span style="cursor: default;" ' | 'title="SALES QUOTA=50K">SALES</span>'; 

The difference is the original has two single quotes around SALES QUOTA=50K. Needs to be double quotes.

Jeff_f, Seems there's been some code tightening in 7.7.03 on DM code that uses 2 single quotes to frame an element. Good to know when we make the 7.7.0x leap.

I promised to provide a JQuery ToolTip update and here it is. While not a tutorial on JQuery or JQuery tools, it is a short example adding to the code above to show that customized tooltips are possible.

Here is sample code to copy and paste and run as is. Works on HTML. AHTML loses this custom code when using any of the active content so I would not use it for these custom ToolTips.

-SET &TITLE_MSG =
-  '<span style="cursor: default;" ' | 'title="SALES QUOTA=50K">SALES</span>';
TABLE FILE CAR
SUM
COMPUTE SALES_CHK/A32=IF SALES GT 50000 THEN 'HURRAY! ABOVE QUOTA :)' ELSE 'UH-OH! BELOW QUOTA :(';NOPRINT
COMPUTE SALES_DISPLAY/A75='<a title="'|SALES_CHK|'">'|PTOA(SALES,'(P8)','A10')|'</a>';AS '&TITLE_MSG'
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
-*------- New code starts here -------------
-HTMLFORM BEGIN
<HTML>
<HEAD>
<!-- This calls both the JQuery and Tools library in one javascript framework -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<style>
/* This styles all 'TITLE' tooltips */
.tooltip {
   display:none;
   font-size:12px;
   border:1px solid #000;
   padding:5px;
   color:#000;
   background-color:#ffa;
   }
</style>
</HEAD>
<BODY>
<DIV>!IBI.FIL.hold;</DIV>
<script>
/* This activates all 'TITLE' tooltips hardcoding the effect, position, and offset */
$("[title]").tooltip({
   effect: 'slide',
   position: "center right", 
   offset: [10, 25]
   });
</script>
</BODY>
</HTML>
-HTMLFORM END

If you want to explore more, you can find all kinds of documentation and demos at the following websites:

To find out more about the JQuery ToolTip plugin: JQuery Tools

For more on JQuery: JQuery

DavSmith,

Thanks for posting this example - can't wait to try it.

Cheers,

And I have to say, that jQuery TOOLS looks amazing!

It would be even nicer if the entire TD cell (not just the text within) were wired with the tooltip.

.parentsUntil('tr') can be used to create a jquery selector for the TDs enclosing the respective title-imbued anchor tags. Is there a neat way to copy each title attribute up to the parent TD?

-Jack

Jack, The standard 'Title=..." ToolTip activates as the cursor passes over the text. And that is how these enhanced ToolTIps activate. Your suggestion probably can be handled by modifying some of the underlying JQuery javascript framework code. But I'm nowhere near brave enough to try that! Good idea though. Any JQuery tweakers out there willing to try?

Agreed, Francis!

Interestingly, I just got email this morning on the Houston LUG meeting March 23, 2012 and they have a guest speaker with the following topic:
"JQuery and WebFOCUS, How To Create a Robust Interactive Web Reporting Environment, presented by Troy Proffit, Insperity"

I'd go, but that's a 3 hour drive one way from Dallas. Maybe Kerry can get him to do an online Webinar?

quote:

Originally posted by j.gross:
It would be even nicer if the entire TD cell (not just the text within) were wired with the tooltip.

.parentsUntil('tr') can be used to create a jquery selector for the TDs enclosing the respective title-imbued anchor tags. Is there a neat way to copy each title attribute up to the parent TD?

-Jack

Jack, after some tweaking, I was able to use TD elements and have the ToolTip appear when the cursor is moved over any of the cell space, not just the text. It's more cumbersome as you have to include each displayed field into a single compute so that TD elements are handled properly, but it works:

-SET &TITLE_MSG =
- 'COUNTRY</td><td ALIGN=RIGHT title="SALES QUOTA=50K">SALES';
SET HOLDLIST=PRINTONLY
TABLE FILE CAR
SUM
COMPUTE SALES_CHK/A32=IF SALES GT 50000 THEN 'HURRAY! ABOVE QUOTA :)' ELSE 'UH-OH! BELOW QUOTA :(';NOPRINT
COMPUTE SALES_DISPLAY/A100=COUNTRY|'</td><td ALIGN=RIGHT title="'|SALES_CHK|'">'|PTOA(SALES,'(P8)','A10');AS '&TITLE_MSG'
BY COUNTRY NOPRINT
ON TABLE SET PAGE-NUM OFF
ON TABLE HOLD FORMAT HTML
END
-*------- New ToolTip code start here
-HTMLFORM BEGIN
<HTML>
<HEAD>
<!-- This calls both the JQuery and Tools library in one javascript framwork -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<style>
/* This styles all 'TITLE' tooltips */
.tooltip {
   display:none;
   font-size:12px;
   border:1px solid #000;
   padding:5px;
   color:#000;
   background-color:#ffa;
   }
</style>
</HEAD>
<BODY>
<DIV>!IBI.FIL.hold;</DIV>
<script>
/* This activates all 'TITLE' tooltips hardcoding the effect, position, and offset */
$("[title]").tooltip({
   effect: 'slide',
   position: "center right",
   offset: [10, 25]
   });
</script>
</BODY>
</HTML>
-HTMLFORM END

Rather than squeezing in another TD tag, what I had in mind was some script to select the A tags with a title attribute; copy each title up to the immediate-parent TD tag; and delete the original title attribute.

Jack, that would be a handy method. let's see if someone else has a script to do that.

Keerthi, we kind of got off message from your original question after providing an answer that works. You should mark this topic [SOLVED]. Thanks.

David

Got it!

No special jquery coding; just attach the title attribute to DIV (rather than SPAN or A) tags. That makes the associated hover-sensitive area equal the entire area of the surrounding (WebFOCUS-generated) TD element.

TABLE FILE CAR
SUM
COMPUTE SALES_CHK/A32=IF (SALES GT 50000)
      THEN 'Hurray! Above quota :)'
      ELSE 'Uh-oh! Below quota :('; NOPRINT
COMPUTE SALES_DISPLAY/A75=
      '<div title="'|SALES_CHK|'">'|PTOA(SALES,'(P8C)','A10')|'</div>';
   AS '<div title="Sales Quota=50K">SALES</div>'
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>
<!-- This calls both the JQuery and Tools library in one javascript framework -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<style>
.tooltip {
   display: none;
   font-size: 12px;
   border: 1px solid #000;
   padding: 5px;
   color: #000;
   background-color: #ffa;
   }
</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

Jack, so easy...'Wow. I could've had a V8'. Thanks. The DIV works better than the Anchor. Have a great weekend.

David

It would be nice if WF would pass through ALT='text' from STYLESHEET to the generated HTML, regardless of the TYPE.

-- Then we could construct a general method to invoke the jquery tooltip (by referencing a javascript file to locate and convert the alt attribute to a title attribute) -- without having to imbed HTML code in the column title or column values; and the tooltip content would be right there in the STYLE section of the TABLE request.

Alas, ALT is syntactically tolerated but semantically ignored if the object is not an image.



It would also help if setting HTMLCSS=ON did not suppress CLASS values coded in the STYLE section. (After all, a class can consist of several 'words' -- ours and IBI's -- and a CSS selector can be triggered by presence of the target value as a component word in the class value, even if it is not the only word.) That would allow the tooltip to be triggered by the class attribute, rather than simply by the presence of an ALT value.


NFR, anyone?

Good points, all, Jack.

I'm for an NFR.

I like the ALT="text" on any TYPE (and OBJECT/ITEM). This would also work with conditional styling. Styling could be done through the CLASS attribute or by possibly adding CSS styling in the ALT surrounding the text.