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.

8 thoughts on “Using tooltips in Oracle APEX applications

  1. 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"]
    ———————————-

  2. 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

  3. 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

  4. 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?

  5. I didn’t know this yet, and I’ve been looking for days for this information, having been working with APEX for about a year!

    I’ve never done web development before my current APEX project, so on behalf of formerly pure-Oracle guys like me, thanks for not assuming that this was old news (even though your original posting was two years ago!) :-)

  6. Hi,

    The tooltip is perfect, but can the rectangular box in which the text is being displayed be changed? Is it possible to display the text in a different call out box instead of the rectangular one?

    Thanks,
    Vignesh

Comments are closed.