We have copied the required scripts to the web server script directory of our domain. We have also created a test page in PeopleSoft, and ready to add some static HTML into it to support the tool tip text.
To do so, add a HTML area into the page. And set the "value" property to "constant" and copy the HTML code as shown below. I have added my comments in blue. Do not include them to the page.
To do so, add a HTML area into the page. And set the "value" property to "constant" and copy the HTML code as shown below. I have added my comments in blue. Do not include them to the page.
| <html> <head> <script type="text/javascript" src="/<domainname>/script/jquery.1.3.2.min.js"></script> <script type="text/javascript" src="/<domainname>/script/jquery.qtip-1.0.0.min.js"></script> This has to be mentioned in this order. Also ensure that the file names mentioned here (.js ones) are exactly the same as you have uploaded in the web server script folder. <script type="text/javascript"> All tips are loaded after the document is completely loaded in the browser. $(document).ready(function(){ $("#TEST_REC_FIELD1").attr("title","I triggered a ToolTip"); $("#img11").attr("title","Tooltip on Images"); $("#RE_LEVEL0_TMP_CAPTURE_ID\\$0").attr("title","A Tooltip for the Grid Record"); we are using the "attr" method to set "title" attributes for our text field (TEST_REC_FIELD1 is the id of the field. Replace this with the ID of your text field), image ("img11" is the id of the image. Replace this with the ID of your image),and scroll level 1 field (RE_LEVEL0_TMP_CAPTURE_ID\\$0 is the id of the 1st element of the grid. Replace this with the ID of your grid element. Note that we are using two '\\' slashes to escape the "$" sign). $("#TEST_REC_FIELD1").qtip({ style: { name: 'blue' }, position: { corner: { target: 'rightBottom', tooltip: 'bottomLeft' } } }); We define the style and positioning of the text field here. $("#RE_LEVEL0_TMP_CAPTURE_ID\\$0").qtip({ style: { name: 'red' }, position: { corner: { target: 'rightBottom', tooltip: 'bottomLeft' } } }); We define the style and positioning of the grid element here. $("#img11").qtip({ style: { name: 'cream' // Inherit from preset style }, position: { corner: { target: 'rightBottom', tooltip: 'bottomLeft' } } }); We define the style and positioning of the image here. Note that the image is another HTML area, containing a constant code <img id='img11' src=%Image(HELPIMAGEPSFT) > }); </script> </head> <body> </body> </html> </body> </html> |
That is it, we are done now and ready to see the code in action. If you have done everything correctly, you will be able to find nice tooltips as show in the screen shots below. (in PeopleSoft page)
Tooltip for the text field (above) and image field (below)
A tooltip for the first element of our grid is provided below
With qTip, you have absolute control over the positioning of the tip and you can position it in such a way that it does not interfere with other elements of the page.
Continue Reading:
Achieving more dynamism with Tooltips in PeopleSoft.
Continue Reading:
Achieving more dynamism with Tooltips in PeopleSoft.
Is it possible to put a unique qtip on each row of a grid? On a timesheet I want to display the project details as a qtip and each row in the grid can have a different project id.
ReplyDelete