Purpose
Adding a tooltip with dynamically generated content
In HTML the "title" attribute of an element specifies a tooltip text that is shown when the mouse moves over the element. The S10 Framework automatically generates a tooltip when the content cannot be fully shown due to a limited element width or container width.

Example:


HTML 
<span class='output' name='systemstatus'></span>

In some cases, a tooltip that displays additional information can be helpful to the user.

Example:



Solution
1. Add a class attribute for the dynamic tooltip text in your ABAP program. For example, define "systemstatus_tooltip" in addition to the "systemstatus" attribute:
ABAP 
data:
      systemstatus         type string, " Status
      systemstatus_tooltip type string. " Status tooltip
2. Fill the variable "systemstatus_tooltip" in a "build" method, either in a separate method or, if it fits well because of similar accesses, in the "build" method for "systemstatus":
ABAP 
methods:
     build_systemstatus
        importing
          aufnr                type viord-aufnr
        exporting
          systemstatus         type string
          systemstatus_tooltip type string.
method build_systemstatus.
    clear:
      systemstatus,
      systemstatus_tooltip.

    data: tj02t type tj02t.

    select tj02t~txt04 tj02t~txt30 into corresponding fields of tj02t
        from tj02t inner join jest on tj02t~istat = jest~stat
      where tj02t~spras = sy-langu
      and jest~inact = space
      and jest~objnr in
       ( select objnr from aufk where aufnr = aufnr ).

      if systemstatus is not initial.
        systemstatus = systemstatus && | |.
      endif.
      systemstatus = systemstatus && tj02t-txt04.

      if systemstatus_tooltip is not initial.
        systemstatus_tooltip = systemstatus_tooltip 
           && cl_abap_char_utilities=>cr_lf.
      endif.
      systemstatus_tooltip = systemstatus_tooltip 
           && tj02t-txt04 && | | && tj02t-txt30.

    endselect.

  endmethod.
To display our tooltip in multiple lines as shown above, we separate the values with a line break.

3. In HTML, we insert the "systemstatus_tooltip" variable as a "hidden" element after the "systemstatus" element. Using an "onchange" JavaScript function, we populate the "title" attribute of the preceding "systemstatus" element with the value of the "systemstatus_tooltip" variable:

HTML 
<span class='output' name='systemstatus'></span>
<input type="hidden" class='output'
    name='systemstatus_tooltip'
    onchange="this.previousElementSibling.title=this.value">
Dynamic tooltips in table cells
Dynamic tooltips can also be used in table cells.

Example:



The implementation in ABAP is identical, but note that the tooltip variable and the "build" method must now be defined in the class corresponding to the table row.

In HTML, the implementation is slightly different because the S10 Framework does not call an "onchange" method for individual table cells when the table is displayed. Instead, we can define an "onchange" method for the entire table, in which we step through all the tooltip elements of the table:

HTML 
<form class='table' name='tabviord'
    onchange="change_tabviord(this);">
...
    <!-- Status -->
    <div class='outputcelldiv' style="width: 160px;"
        name="systemstatus">
    </div>

    <input type="hidden" class='outputcell' 
        name='systemstatus_tooltip' />
...
JavaScript 
function change_tabviord(tabform) {
    var tooltips = tabform.querySelectorAll
                  ("input.outputcell[name='systemstatus_tooltip']");
    for (var k = 0; k < tooltips.length; k++) {
        var t = tooltips[k];
        t.previousElementSibling.title = t.value;
    };
};

Components
 S10 Framework