Javascript Tooltip Integration

Written by Paulo Vale on Tuesday, January 08, 2008

As I've said in my previous post, there is another interesting project for handling tooltips, the BoxOver Tooltips from the same author of the calendar script.





It is a small javascript that you can integrate with you APEX applications. It is very simple to use and has powerful customizations possibilities like using your own CSS to change the look and feel. You can even include pictures in your tooltips. Go to the project page for nice examples and howtos. Click here to see it working with APEX.



To install the script, download the latest version of BoxOver tooltips and copy the boxover.js script into a filesystem directory or just upload it as a static file under Shared Components. Include the following somewhere in the HTML of your page (Header section of you page or directely in page template if you want the tooltip feature available in all application pages). Substitute the path of the file accordingly making sure it points to the correct location of the boxover.js file.





Now you can use this feature just by calling it in an appropriated place. A simple example, using a Text Field is adding the following tag to "HTML Form Element Attributes" property :

TITLE="header=[Date] body=[Click here to pick a date]";
BoxOver is configured through the "title" attribute of HTML elements. This means you can use it in all your HTML objects. Works in all latest browsers incl. IE 6, IE 5, Mozilla 1.4+, FireFox 0.9.3 Opera 7.

20 comments comment | Posted in » , ,  

Related Posts by Categories



Widget by Hoctro | Jack Book

  1. 20 comments: Responses to “ Javascript Tooltip Integration ”

  2. By Anonymous on July 17, 2008 at 12:19 PM

    How do I get the tool tip to work in reports - eg I have emp id and want to display employe ename in diff table in the tooltip ?

  3. By Paulo Vale on July 17, 2008 at 12:34 PM

    Hi Anonymous,

    Edit you Report and go to Report Attributes tab. Now you need to edit your column and access the Link Attributes property. Then put something like:

    title="header=[Employee] body=[#ENAME#]"

    Note that you must have the ENAME column in your report even if it is hidden.

    Hope that helps.

  4. By Anonymous on July 28, 2008 at 3:38 PM

    Hi Paulo,

    How do I do the substitition that you refer to in using Boxover ?

    I think I it will work ?

    Thanks Wim.

  5. By Paulo Vale on July 28, 2008 at 6:44 PM

    Hi Wim,

    I'm not sure if I undestand your question. Are you refering to the location path of boxover.js file in your system? You only need to modify the file path if you upload the js file directly to the filesystem. You can always use APEX static files like I did in this example.

    Best regards,
    Paulo

  6. By Anonymous on August 29, 2008 at 2:48 PM

    Hi Paulo,

    Finally got Boxover to work !

    It however does not show the desc in the tooltip, if I do NOT have the desc as a column.

    If I make it hidden it does not show in the tooltip

    Hope you can help me with this ?

    Thanks !

  7. By Paulo Vale on September 1, 2008 at 5:50 PM

    Hi Anonymous,

    You need to have the value you want to show as a column in your report sql.

    If you don't want the column to show up in your report but want it on the tooltip, you can go to the "Report Attributes" tab and deselect the "Show" column.

    Hope that helps.

  8. By Anonymous on September 30, 2008 at 12:27 PM

    Hi Paulo,

    Thanks for the advice, this works in ordinary reports but what do I do in case if interactive report - If I make the column hidden the contents of tooltip also disappears ?

    Thanks Wim !

  9. By Paulo Vale on September 30, 2008 at 3:37 PM

    Hi Win,

    Unfortunately for Interactive Reports you can't put in the tooltip referencing to hidden columns. Doesn't work because Interactive Reports have an AJAX request, when you hide a column a new select is made excluding hidden columns.

    Paulo Vale

  10. By Anonymous on January 7, 2009 at 10:15 PM

    I really like your boxtip example. Please can you give me the link to download the javascript file. The link on the page is not working.

    Thanks!
    RK.

  11. By Paulo Vale on January 7, 2009 at 11:11 PM

    Hi RK,

    Please try this link:
    http://boxover.swazz.org/boxover.js

  12. By Anonymous on January 8, 2009 at 2:03 AM

    Paulo,

    That works!
    Thanks for the link and the great code.

    RK.

  13. By Anonymous on January 13, 2009 at 7:01 PM

    Hi Paulo
    How to get image tip when hovered over the textfield.What should i write in form attrib property to get image.

    thanks

  14. By Paulo Vale on January 14, 2009 at 10:10 AM

    Hi Anonymous,

    You just need to put the image path into the title attribute like this:

    TITLE="header=[Image] body=[< img src='http://www.oracle.com/global/pt/pmes/images/logo_partners/neoface.gif'>]";

    If you want it over a text item you should use the "HTML Form Element Attributes" element attribute.

  15. By Nitya Ryali on February 16, 2009 at 7:05 PM

    Hi Paulo,

    How to put boxover tooltip or normal tooltip for report header in classic reports?

    Boxover tooltip for report column worked when I defined a column link. Can we use tooltip without defining column link?

    Thanks
    Kishore

  16. By Paulo Vale on February 17, 2009 at 10:28 AM

    Hi AragoRn,

    You can use the TITLE attribute for just about any page element.

    Use it to describe links, tables, individual table rows, and other structural HTML elements.

    That means you have to create an html element around the text on your column header. Please try doing this in your column header:

    < p title="the boxover tags here">ColumnHeaderText< /p>

    I haven't tried this. Tell if it works.

    Regards

  17. By Nitya Ryali on February 17, 2009 at 7:09 PM

    Thanks Paulo. Boxover tooltip works for column header too.

    Kishore

  18. By Anonymous on July 29, 2010 at 10:37 AM

    Hi,

    Could we display dynamic tooltip on a Flash Chart ?

    I want to display some information in a tooltip when the mouse is over a bar on a flash chart.

    Thanks in advance,

    -F

  19. By APEX Developer In the USA on August 23, 2010 at 4:07 AM

    Trying to make this work in APEX 4.0 and it's NOT.. Can you post a copy of your application for download or something?

    I tried adding the code to load on the page level and also region level, code is loaded in the static files area of app, trying to access it using #work_spaces# in location for SRC..

  20. By Anonymous on October 21, 2010 at 5:30 PM

    The boxover.js file is not at the location you have provided. Do you have the actual source code you can share on line here?

    Thanks.
    Maggie

  21. By Paulo Vale on October 22, 2010 at 9:53 PM

    Maggie,

    Here it is:
    http://apex.oracle.com/pls/otn/wwv_flow_file_mgr.get_file?p_security_group_id=848098600224772900&p_fname=boxover.js

Post a Comment

Subscribe to: Post Comments (Atom)