Inside Oracle APEX by Patrick Wolf

Wednesday, August 15, 2007

Using tooltips in Oracle APEX applications

That's maybe an old tip and probably everybody already knows it, but because I just answered that question on the OraFAQ forum, I wanted to share it with you in case you didn't know.

Maybe you have already noticed that in the Oracle APEX Builder at some pages a tooltip is used. For example for the icons on the Drag and Drop Layout page. This tooltip functionality can be reused in your own applications. You just have to add
onmouseover="toolTip_enable(event,this,'This is a tooltip')"
into the "Attributes" property of your HTML button or into the "HTML Form Element Attributes" property of your page item. In the end you can attach it to any HTML element. But I think you got the idea how it works.

Labels: , ,

posted by Patrick Wolf at 8/15/2007

del.icio.us digg dzone furl reddit technorati

7 Comments:

  • One more tip with this for anyone:
    Create a label with help on mouseover.
    Put the following in the "Before label" entry of the label template:
    (Change < and > for [ and ], this blog does not accept all html tags)
    ----------------------------------
    [label for="#CURRENT_ITEM_NAME#" tabindex="999"][a class="t10OptionalLabelwithHelp" href="#"
    onmouseover="toolTip_enable(event,this,getText('#CURRENT_ITEM_ID#','&SESSION.'))"
    tabindex="999"]
    ----------------------------------

    By Anonymous Guido Fasbender, at 20 August, 2007 09:44  

  • Hi Guido,

    is it possible that getText is a self written javascript function? Because I couldn't find it in htmldb_html_elements.js and htmldb_get.js

    Patrick

    By Blogger Patrick Wolf, at 20 August, 2007 12:39  

  • Indeed, you're right!
    I've written this some time ago so I already forgot getText was not standard. That makes the example quite useless isn't it? :-)

    It's an ajax script that looks up the helptext

    I would make the ajax call with prototype.js, but for completeness here's some working example.
    You never know who might read it :-)

    Here's the code:
    ------------------------
    function getText(itemid, sessionid) {
    http_request = false;
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
    // set type accordingly to anticipated content type
    http_request.overrideMimeType('text/html');
    }
    } else if (window.ActiveXObject) { // IE
    try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
    }
    }
    if (!http_request) {
    alert('Cannot create XMLHTTP instance');
    return false;
    }
    http_request.open('GET', 'wwv_flow_item_help.show_help?p_item_id='+itemid+'&p_session='+sessionid, false);
    http_request.onreadystatechange = showLabel;
    http_request.send(null);

    return returnText;
    }

    function showLabel() {
    if (http_request.readyState == 4) {
    if (http_request.status == 200) {
    var labelText = http_request.responseText;
    var searchStringTextBegin = '[span class="instructiontext"]';
    var searchStringTextEnd = '[/span]';
    var searchLocBegin = labelText.indexOf(searchStringTextBegin) + searchStringTextBegin.length;
    var searchLocEnd = labelText.indexOf(searchStringTextEnd, searchLocBegin);
    returnText = labelText.substr(searchLocBegin, searchLocEnd);
    }
    }
    }


    ---------------------

    Regards Guido

    By Anonymous Guido Fasbender, at 20 August, 2007 15:40  

  • Just a question for anyone here.. Tried the above code and it works okay in IE 6.0 (tool tip has isue with list boxes in front of it, Thanks MS..)

    However, posted codes does NOTHING in Firefox 2.x.. Is there an issue?

    By Anonymous tony miller, at 27 November, 2007 20:17  

  • Just tried it again with FF and it works as expected. Check out the following link http://apex.oracle.com/pls/otn/f?p=2672:1. Do you see a tooltip when you put your mouse over the "Tooltip" textfield?

    Patrick

    By Blogger Patrick Wolf, at 27 November, 2007 20:24  

  • Quick question.. Can yo udo a tooltip on a dhtml tree?? I mean the items in the tree, to show a small description of the menu item?

    I could not find a spot to post the javascript call..


    Thanks!

    Tony Miller
    tomiller@utmb.edu

    By Anonymous Anonymous, at 23 January, 2008 04:51  

  • Hi Tony,

    just add a SPAN around your tree label where you can attach the onmouseover event. For example like the following query:

    SELECT EMPLOYEE_ID AS ID
    , MANAGER_ID AS PID
    , '<span onmouseover="toolTip_enable(event,this,''Primary key: '||EMPLOYEE_ID||''');">'||
    LAST_NAME||
    '</span>' AS NAME
    , NULL AS LINK
    , NULL AS A1
    , NULL AS A2
    FROM EMPLOYEES

    PS: It will not format probably, I will send you also an e-mail.

    Patrick

    By Blogger Patrick Wolf, at 23 January, 2008 08:31  

Post a Comment

<< Home