Configuring an Editable Component's Title Option

You can configure an editable component's title option to display a note window with advisory text (often called a tooltip) when the input component has focus.

The following image shows three ojInputText components configured to display text when the user sets focus in the input field. In the top example, the title definition is set on the HTML input element directly. In the middle example, the title definition is defined as an option for the ojInputText component. In the bottom example, the title definition is also defined as an option for the ojInputText component, with HTML formatting added to the advisory text.

The image is described in the surrounding text.

Both methods work if you don't care about the formatting of the advisory text. However, the HTML title element doesn't support text formatting, and you must use the component's title option or another mechanism if you want to format the text in the note window.

To configure an editable component's title option:

  1. Add the editable component to your page.
  2. In the markup, add the title option to the component's definition or directly to the HTML input element.

    The following code sample shows the markup for defining the three ojInputText components. The samples also define regular expression validators to ensure that the user enters at least three letters or numbers.

    <div id="form-container" class="oj-form">
  <h3 class="oj-header-border">Title</h3>
  <label for="text20">input with 'title' attribute</label>
  <input id="text20" type="text" autocomplete="off" 
    required name="text20" 
    title="Enter at least 3 alphanumeric characters" 
    data-bind="ojComponent: {
      component: 'ojInputText', 
      value: text, 
      validators: [{
        type: 'regExp', 
        options: {
          pattern: '[a-zA-Z0-9]{3,}', 
          messageDetail: 'You must enter at least 3 letters or numbers'}}]}">
 
  <label for="text21">input with 'title' option</label>
  <input id="text21" type="text" autocomplete="off" required name="text21" 
    data-bind="ojComponent: {
      component: 'ojInputText', 
      value: text, 
      title: 'Enter at least 3 alphanumeric characters',
      validators: [{
        type: 'regExp', 
        options: {
          pattern: '[a-zA-Z0-9]{3,}', 
          messageDetail: 'You must enter at least 3 letters or numbers'}}]}">
 
  <label for="text22">input with formatted text in 'title' option</label>
  <input id="text22" type="text" autocomplete="off" required name="text22" 
    data-bind="ojComponent: {
      component: 'ojInputText', 
      value: text, 
      title: '<html>enter <span style=\'color:red\'>at least 3 alphanumeric</span> characters</html>',
      validators: [{
        type: 'regExp', 
        options: {
          pattern: '[a-zA-Z0-9]{3,}', 
          messageDetail: 'You must enter at least 3 letters or numbers'}}]}">
</div>
  3. In your application script, set the component's value to a Knockout observable.

    In this example, each ojInputText component's value option is defined as text which is set to a Knockout observable in the following script.

    require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojinputtext'],
  function(oj, ko, $)
  {
    function MemberViewModel() 
    {
      var self = this;
      self.text = ko.observable();
    };
 
    $(document).ready(
      function()
      {
        ko.applyBindings(new MemberViewModel(), document.getElementById('form-container')); 
      }
    );
  });

For the complete example, see Help and Title in the Oracle JET Cookbook. For additional detail about the ojInputText component, see the ojInputText API documentation.

For additional information about the regular expression validator, see About Oracle JET Validators and Converters.