ADF: Hide Tooltips on Input Components
ADFDevelopment & ConsultingHealthcareJavascriptJDeveloper

ADF: Hide Tooltips on Input Components

5. Januar 2021 August 13th, 2021

In this blog, I show how to hide the framework generated tooltip window on some ADF input components.

Problem

In the image above, we see such a tooltip window “Example: 12/3/2020”. It should help the user to input the right data. However, after some time working with an application, the users get annoyed by the tip window and ask to remove it.

We look at two ADF input components, af:inputDate and af:inputText, in this sample. The first component, af:inputDate, shows the tip out of the box,

<af:inputDate label="Enter Date:" id="id1" autoSubmit="true">
</af:inputDate>

while the af:inputText shows the tooltip window when we add a validation

<af:inputText label="Enter Number:" id="it1" autoSubmit="true">
  <af:validateLongRange id="vlr1" minimum="0" maximum="1000" hintMinimum="Minimum: 0"
 hintMaximum="Maximum: 1000" hintNotInRange="Range: 0-1000"/>
</af:inputText>

Looking at the component itself, I did not find a property to disable the tooltip window. You can set the shortDescription property to some value. This value is then displayed, but you still get the tooltip window.
If you examine the resulting HTML code of the page, you’ll notice that you don’t see any code for the tooltip until you set focus on the field. The code for the tooltip window is added to the focus event.

Solution

JavaScript comes to the rescue here. We can add an af:clientListener to the ADF component blocking the tooltip window when the component gets the focus. We add a JavaScript function

          function blockNoteWindow(event) {
              var src = event.getSource();
              event.cancel();
              src.getPeer().ShouldShowHint = function () {
                  return false;
              }
          }

and call this function on the focus event of the component where we want to hide the tooltip window.

<af:inputDate label="Enter Date:" id="id1" autoSubmit="true">
    <af:clientListener method="blockNoteWindow" type="focus"/>
</af:inputDate>

and

<af:inputText label="Enter Number:" id="it1" autoSubmit="true">
    <af:validateLongRange id="vlr1" minimum="0" maximum="1000" hintMinimum="Minimum: 0"
                          hintMaximum="Maximum: 1000" hintNotInRange="Range: 0-1000"/>
    <af:clientListener method="blockNoteWindow" type="focus"/>
</af:inputText>

The JavaScript function overloads the ShouldShowHint() function of the component to just return nothing. For every component where we want to hide the tooltip window, we add the af:clientListener calling the blockNoteWindow JavaScript function.

The output we get is

Finally, the whole page looks like

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html>
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <af:document title="index.jsf" id="d1">
        <af:resource type="javascript">
          function blockNoteWindow(event) {
              var src = event.getSource();
              event.cancel();
              src.getPeer().ShouldShowHint = function () {
                  return false;
              }
          }
        </af:resource>
        <af:form id="f1">
            <af:panelGridLayout id="pgl1">
                <af:gridRow height="50px" id="gr2">
                    <af:gridCell width="100%" halign="stretch" valign="stretch" id="gc2">
                        <!-- Header -->
                        <af:outputText value="Blog Hide Tooltips" id="ot1" inlineStyle="font-size:x-large;"/>
                    </af:gridCell>
                </af:gridRow>
                <af:gridRow height="100%" id="gr1">
                    <af:gridCell width="100%" halign="stretch" valign="stretch" id="gc1">
                        <!-- Content -->
                        <af:panelGroupLayout id="pgl2" layout="vertical">
                            <af:inputDate label="Enter Date:" id="id1" autoSubmit="true">
                                <af:clientListener method="blockNoteWindow" type="focus"/>
                            </af:inputDate>
<af:inputText label="Enter Number:" id="it1" autoSubmit="true">
    <af:validateLongRange id="vlr1" minimum="0" maximum="1000" hintMinimum="Minimum: 0"
                          hintMaximum="Maximum: 1000" hintNotInRange="Range: 0-1000"/>
    <af:clientListener method="blockNoteWindow" type="focus"/>
</af:inputText>
                        </af:panelGroupLayout>
                    </af:gridCell>
                </af:gridRow>
            </af:panelGridLayout>
        </af:form>
    </af:document>
</f:view>

The solution should work in any JDeveloper version. I’ve tested it in 11.1.1.9 and 12.2.1.4. You don’t need a DB connection.

Timo Hahn
Letzte Artikel von Timo Hahn (Alle anzeigen)